How to lay out with z-index positioned elements in a third level hierarchy

Question

I have a problem with z-index property. I have some absoluted positioned elements (div in the code)one inside each other. The first div inside (red div) naturally would be in front of its parent (aliceblue element), thus I give a negative z-index to the red div inside and it's ok. But the aqua div (inside the red div) is in front of red element too (instead I would lay out the aqua element behind the red element), to lay out it behind I give it z-index:-5 for example but it doesn't work because I created a new stacking context different from stacking context of its father

         div {
            width: 300px;
            height: 300px;
            text-align: center;
            position: absolute;
         }
         .a {
            background-color: aliceblue;
            position: relative;
         }
         .a1 {
            background-color: red;
            left: 20px;
            top: 20px;
            z-index: -1;
         }
         .a11 {
            background-color: aqua;
            left: 10px;
            top: 10px;
            /* z-index: -5; This doesn't work*/
         }

         .a2 {
            background-color: yellow;
            top: 40px;
            z-index: -2;
         }

  
      <div class="a">
         A
         <div class="a1">
            A1
            <div class="a11">A11</div>
         </div>
         <div class="a2">A2</div>
      </div>

Instead of creating a direct child-parent link, if you can put all the elements in absolute positioning and wrap them all in a single wrapper div, it will give you more control over the elements. If you want that result I can post the answer. — SARAN SURYA, Jan 10 '22 at 16:05
My real markup require the posted structure. I know like to do in the scenario you described. — Nick, Jan 10 '22 at 16:23
I have tried a bunch of methods, but not getting a perfect answer, Maybe this might help you get started https://stackoverflow.com/questions/54897916/why-cant-an-element-with-a-z-index-value-cover-its-child. Also kindly post the solution if you get it, that will be helpful. — SARAN SURYA, Jan 10 '22 at 17:06
From the accepted answer in your link: There is no way to have the parent above a child element when setting a positive z-index to the child. Also there is no way to have the parent above the child if we set a z-index to the parent element different from auto (either positive or negative). So it seems that this is not possible do it — Nick, Jan 10 '22 at 20:20
Yes, Maybe you can try using the other method. That should do the job. — SARAN SURYA, Jan 11 '22 at 02:24

score 1 · Accepted Answer · answered Jan 11 '22 at 09:11

So far we haven't found a way to do this using z-index.

The following method may or may not be suitable for your particular use case/overall context but it does solve the problem for the code given in the question.

This snippet uses 3d transforms rather than z-index to position the elements in relation to the viewer who is looking head on to the screen.

Of course we don't actually want to introduce perceptible perspective so the snippet uses a small shift back (0.1px). This seems enough to get the system to position elements on top of each other in the required order but small fractions were ignored (at least on my Windows10 Edge).

div {
  width: 300px;
  height: 300px;
  text-align: center;
  position: absolute;
  transform-style: preserve-3d;
}

.a {
  background-color: aliceblue;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.a1 {
  background-color: red;
  left: 20px;
  top: 20px;
  transform: translate3d(0, 0, -0.1px);
}

.a11 {
  background-color: aqua;
  left: 10px;
  top: 10px;
  transform: translate3d(0, 0, -0.2px);
}

.a2 {
  background-color: yellow;
  top: 40px;
  transform: translate3d(0, 0, -0.4px);
}

<div class="a">
  A
  <div class="a1">
    A1
    <div class="a11">A11</div>
  </div>
  <div class="a2">A2</div>
</div>

It's work. Great workaround. I will accept your answer in a few time, at the moment I wait if someone pull the rabbit out of the hat — Nick, Jan 11 '22 at 13:59

How to lay out with z-index positioned elements in a third level hierarchy

1 Answers1