Relative CSS positioning

[Tim Johansson]

Hello,

I have an image, upon which I want to place another image. I've figured out
this should be done by CSS positioning, but I don't know the exact
coordinates of the other image. How do I place the image knowing only where
on the other image I want to place it?

 

[rf]

Tim Johansson

I have an image, upon which I want to place another image.

Why not use your image composing software?

 

[Spartanicus]

I have an image, upon which I want to place another image. I've figured out
this should be done by CSS positioning

Try negative margins first.

 

[Tim Johansson]

Tim Johansson


Why not use your image composing software?

The image's position is calculated by PHP, and creating images on-the-fly
would consume too much time and bandwidth.

 

[rf]

Tim Johansson

The image's position is calculated by PHP, and creating images on-the-fly
would consume too much time and bandwidth.

Hmmm. Off top of head solution #1...

Create a div exactly the same size as the first image. Background of div is
first image. Position: relative so it becomes a containing element (no top
or left).

Inside the div an <img> pointing to the second image. Position: absolute.
Top: and bottom: now refer to the top left of the div, that is the first
image. If the first image (the div really) moves then so does the second
image.

You don't need to know where the first image is positioned (which is a real
hard thing to determine anyway (client side) and usually impossible server
side).

<tinkers/>
http://users.bigpond.net.au/rf/images.html

Be sure to change your font size so you can see that when to roo moves so
does the bug.

 

[Sid Ismail]

: I have an image, upon which I want to place another image. I've figured out
: this should be done by CSS positioning, but I don't know the exact
: coordinates of the other image. How do I place the image knowing only where
: on the other image I want to place it?

Use a graphics editor, surely? PSP or Irfanview.

Sid

 

[Tim Johansson]

Tim Johansson

Hmmm. Off top of head solution #1...

Create a div exactly the same size as the first image. Background of div is
first image. Position: relative so it becomes a containing element (no top
or left).

Inside the div an <img> pointing to the second image. Position: absolute.
Top: and bottom: now refer to the top left of the div, that is the first
image. If the first image (the div really) moves then so does the second
image.

You don't need to know where the first image is positioned (which is a real
hard thing to determine anyway (client side) and usually impossible server
side).

<tinkers/>
http://users.bigpond.net.au/rf/images.html

Be sure to change your font size so you can see that when to roo moves so
does the bug.

It worked great, thanks!

 

[lime]

I have an image, upon which I want to place another image.

Hmmm. Off top of head solution #1...

<tinkers/>
http://users.bigpond.net.au/rf/images.html

Unbelievable, off the top of your head hey? That's great...