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

Dani AI

Generated

You can overlap reliably by taking the layers out of normal flow. @diafol and @ko ko are right that auto margins center only block-level boxes, and is right that z-index is the safer lever than negative margins. The key is: center a single wrapper, make it position: relative, then absolutely position each image inside it and stack with z-index. Relative offsets (top/left) on the images keep them in flow and fight with centering; absolute positioning avoids that.

<div class="stack">
  <img class="layer base" src="one.jpg" alt="">
  <img class="layer mid"  src="two.png" alt="">
  <img class="layer top"  src="three.png" alt="">
</div>
.stack {
  position: relative;
  width: 700px;          /* set a width so it can center */
  height: 500px;         /* reserve space for the stack */
  margin: 0 auto;        /* centers the whole stack */
}

.layer {
  position: absolute;    /* allows overlap */
  top: 50%; left: 50%;   /* center each layer in the stack */
  transform: translate(-50%, -50%);  /* true centering */
  display: block;        /* avoid inline gaps */
}

.base { z-index: 1; }
.mid  { z-index: 2; transform: translate(-50%, -50%) translate(20px, -40px); }
.top  { z-index: 3; transform: translate(-50%, -50%) translate(60px, -80px); }

Notes and quick fixes for your CSS:

  • margin-top:0 -125px; is invalid. Use margin-top: -125px; or the 4-value shorthand margin: 0 auto -125px auto;.
  • z-index works only on positioned elements (position not static). Keep all layers positioned.
  • If a parent has transform, opacity < 1, or its own z-index, it creates a new stacking context. Put z-index on the overlapping children, not the wrapper.
  • Using Bootstrap? The same pattern works with utilities: wrapper position-relative mx-auto, layers position-absolute top-50 start-50 translate-middle z-1/z-2/z-3.

Recommended Answers

All 9 Replies

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 Member #120589

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

Edited by Member #120589 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.