Member Avatar for kooia

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
  • 2K Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by kooia
Member Avatar for sourcebits

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 because: Fixed formatting
Member Avatar for kooia

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 because: Fixed formatting
Member Avatar for Frankey

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 because: n/a
Member Avatar for sourcebits

Thanks!

Now it's a lot clearer to me

U are welcome.

Member Avatar for kooia

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 because: n/a
Member Avatar for diafol

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

Edited by diafol because: n/a
Member Avatar for ko ko

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

Member Avatar for kooia

Yes,

Thanks,

but, now the

top:-125
margin-top:0 -125

doesn't work.

Is there a way to make them both work?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.