I'm facing technical difficulties.

I can't get position:relative elements to overlap. At the time, I need to center a <div>, and have an image overlapping that, and an image overlapping that.

Could you please send me some test code, with 2 image CSS definitions? One overlapping the other, with different z-indexes?

Thanks so much!

I'm facing technical difficulties.

I can't get position:relative elements to overlap. At the time, I need to center a <div>, and have an image overlapping that, and an image overlapping that.

Could you please send me some test code, with 2 image CSS definitions? One overlapping the other, with different z-indexes?

Thanks so much!

There are two ways to do it.
Let say your page structure is as follow:

<body>
     <center>
         <div class="img1"><img src="climate_01.jpg" alt="" title="" /></div>
         <div class="img2"><img src="climate_02.jpg" alt="" title="" /></div>
     </center>
</body>

Use following CSS:

.img1, .img2{
      position: relative;
      width:480px;
 }

First Way:

 .img2{
      top:-50px;
      left:-50px;
      margin: 0 -50px -50px 0;
 }

Second Way:

 .img2{          
        margin: -50px 0 0 -50px;
   }

There are two ways to do it.
Let say your page structure is as follow:

<body>
     <center>
         <div class="img1"><img src="climate_01.jpg" alt="" title="" /></div>
         <div class="img2"><img src="climate_02.jpg" alt="" title="" /></div>
     </center>
</body>

Use following CSS:

.img1, .img2{
      position: relative;
      width:480px;
 }

First Way:

 .img2{
      top:-50px;
      left:-50px;
      margin: 0 -50px -50px 0;
 }

Second Way:

 .img2{          
        margin: -50px 0 0 -50px;
   }

end quote.

Thanks!

Now it's a lot clearer to me

I recommed z-index because the most browsers are comfortable with the z-index. Concerning negative margins, there could be some differances between browsers, besides, Negative margins always become annoying later on the development for me.

Thanks!

Now it's a lot clearer to me

U are welcome.

Thanks, guys

However, I'm still having troubles because I want to do that and center something.

img.center
{
z-index:3;
position:relative;
width:700px;
top:-125px;
margin-top:0 -125px;
margin-left:auto;
margin-right:auto;
height:500px;
}

Can you guys give me some advice?

Thanks!

Member Avatar

diafol

I think auto margins will work but not with relative positioning. How about making it a block element? display:block?

Right. Auto margin work with block-level element. Can't apply to inline element.

Yes,

Thanks,

but, now the

top:-125
margin-top:0 -125

doesn't work.

Is there a way to make them both work?