1

I'm having trouble figuring out how to set the stacking order of a child element whose parent element has its own stacking context (using transform: translate) such that the child interacts properly with other peers of its parent.

Using the following HTML / JSFiddle as an example. I'd like to get the children in green to sit on top of the blue box below it.

https://jsfiddle.net/j2x7gat1/1/

<div class="wrapper">

  <div class="box" style="transform: translate(10px, 100px);">
    <div>This is the containing box #1 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(40px, 300px);">
    <div>This is the containing box #2 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(70px, 500px);">
    <div>This is the containing box #3 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(100px, 700px);">
    <div>This is the containing box #4 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>
</div>

Corresponding css:

.wrapper {
  /* Empty */
}

.box {
  transform-style: flat;
  background: blue;
  position: absolute;
  width: 410px;
  height: 100px;
  padding: 25px;
  color: white;
  z-index: -1;
}

.menu {
  transform-style: flat;
  border-radius: 2px 0 2px 2px;
  border: solid 3px red;
  position: absolute;
  padding: 10px;
  top: 30px;
  right: 5px;
  height: 180px;
  width: 100px;
  z-index: 1;
  color: white;
  font-size: 13px;
  background: green;
}

The documentation I've found here on StackOverflow and elsewhere don't seem to tackle this case.

Thanks in advance.

Jeremy
  • 2,870
  • 3
  • 23
  • 31
  • short answer: it's impossible since you create a stacking context (details here: https://stackoverflow.com/a/54903621/8620333) – Temani Afif May 23 '19 at 14:26
  • 1
    your only way is to play individually with the z-index of the blue boxes making the first one higher than the second one and the second one higher than the third and so on – Temani Afif May 23 '19 at 14:27

0 Answers0