Placing an object on top of a picture

[Harry Bellafonte]

Hi

Which html tag can I use to place another object ( picture or text) on
top of another picture?
I know I can use div, but then I can only place the object in the
center, left or right. And I want to place the object at a certain
position on the picture.

Any help will be appreciated.

Regards

 

[Ben C]

Hi

Which html tag can I use to place another object ( picture or text) on
top of another picture?
I know I can use div, but then I can only place the object in the
center, left or right. And I want to place the object at a certain
position on the picture.

Any help will be appreciated.

Use position: absolute. Something like this:

<div style="position: relative">
<img src="foo.png" style="display: block">
<div id="otherObject" style="position: absolute; top: 14px; left:
32px">...</div>
</div>

The outer div is made position: relative so it becomes the "containing
block" for the absolutely positioned one, i.e. the block from which
"top: 14px; left: 32px" is measured.

 

[cwdjrxyz]

Use position: absolute. Something like this:

<div style="position: relative">
<img src="foo.png" style="display: block">
<div id="otherObject" style="position: absolute; top: 14px; left:
32px">...</div>
</div>

The outer div is made position: relative so it becomes the "containing
block" for the absolutely positioned one, i.e. the block from which
"top: 14px; left: 32px" is measured.

Yes, this should work. If the composite image is one you wish to use
many times on web pages, it might be worth using an image tool to make
a new composite image from the two images so that you will only have
the insert the composite image in the future. But the absolute
positioning code is so short in this case tha creating a new composite
image would save only little extra code.

 

[Harry Bellafonte]

Use position: absolute. Something like this:

<div style="position: relative">
<img src="foo.png" style="display: block">
<div id="otherObject" style="position: absolute; top: 14px; left:
32px">...</div>
</div>

The outer div is made position: relative so it becomes the "containing
block" for the absolutely positioned one, i.e. the block from which
"top: 14px; left: 32px" is measured.

Hi

Thank you very much for the tip. It worked at one perfectly!!!!

Kind Regards