Jump to content

overlay 2 images


dreamwest

Recommended Posts

How can i overlay 2 images without using position: absolute

 

Basically i want to overlay img2.jpg with img1.jpg, this ocde below works but floats it outside the table, i need it to site inside the table so i can put it in a while loop

 

<table><tr><td >
<div id="placeholder" style="position:absolute; left:32px; top:100px; z-index:1">
<img  class=moduleFeaturedThumb width="140" height="110" src="img1.jpg"></div>

<div id="place" style="position:absolute; left:32px; top:100px; width:160; height:130; z-index:2">
<img src="img2.jpg" width="140" height="110"></div>
</td></tr></table>

Link to comment
Share on other sites

Its a bad practice to mix deprecated attributes with their css equivalents.

 

There is no reason to use a wrapping division, you can apply the required styles directly to the images.

 

The reason your image is positioned outside the table, rather then relatively to the edges of the td element, or parent table cell. Is because you forgot to position the cell itself.

 

 

You should position the parent element using position: relative; to enable absolute positioning relativly to the edges of that element.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.