ansaurus

Question

CSS: Making two transparent images overlapping

Answer 1

+3 A:

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

KennyTM 2010-04-04 16:13:49

beat me to it--here's a live example http://jsbin.com/unogu3/ (I offset the images to show they overlap--obviously yours would be a little different)

Michael Haren 2010-04-04 16:18:38

Answer 2

+1 A:

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

carillonator 2010-04-04 16:14:50

Answer 3

A:

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

Adam Kiss 2010-04-04 16:20:59

ansaurus

tags:

views:

answers:

CSS: Making two transparent images overlapping

related questions