0

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!

5
Contributors
9
Replies
12
Views
7 Years
Discussion Span
Last Post by kooia
0

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;
   }

Edited by mike_2000_17: Fixed formatting

0

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

Edited by mike_2000_17: Fixed formatting

0

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.

Edited by Frankey: n/a

0

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!

Edited by kooia: n/a

0

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

Edited by diafol: n/a

0

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

0

Yes,

Thanks,

but, now the

top:-125
margin-top:0 -125

doesn't work.

Is there a way to make them both work?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.