CODEWITHSUNDEEP
cssimagetransparencyoverlap
Pierre
Pierre

Reputation: 35246

Make two transparent images overlap using CSS

I'm trying to make two transparent images (having the same size/dimension) overlap within a div at their top left corners. I tried:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="margin:20px;">
<div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;">
<img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/>
<img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/>
</div>
</div>
</body>
</html>

But that doesn't work. Instead, the two pictures are concatenated within the parent div.

Upvotes: 4

Views: 8574

Answers (3)

Adam Kiss
Adam Kiss

Reputation: 11859

Just a note:

position:relative and position:absolute refer to 0;0 of closest parent, which has position:relative or position:absolute. If none of your divs has, then it refers to 0;0 (top;left) of document (body).

position:relative - top and left refer to difference between natural flow value of element - i.e. if "image" has natural flow x 1500 and y 1200, top: 150px; left: -50px; will move it to x: 1450; y: 1350;

position:absolute - top and left are aligned against 0;0 of closest p:r or p:a parent element, regardless of natural flow - ex. (in pseudo html/css): 

<div style="relative/absolute">
  <img absolute="top:-20px; left: 150px;">
</div>

Image will be 20px higher and 150px to the right from left top corner of parent div.

That said, you want your container either relative and absolute and both of your stacked images should be position:relative with top: 0; left: 0;. Don't forget to set z-index, if you want to have better control over layering.

-A

Upvotes: 0

carillonator
carillonator

Reputation: 4743

make the second image position:absolute and #main position:relative

Upvotes: 1

kennytm
kennytm

Reputation: 523334

Try to make #main have position:relative, then change the two <img>'s to use position:absolute.

Upvotes: 7

Related Questions