z-index between two stacking contexts

Question

I know it's widely answered question but i'm trying to let an ABSOLUTE element from a stacking context go in front of another stacking context. It's driving me crazy !

Here is what I want to implement :

function expand() {
var x = document.getElementById('expandable')
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container{
  transform:translate(0);
  position:relative;
  width: 100%;
  height:100px;
  z-index:0;
}

.red {
  background-color:red;
}

.orange {
  background-color:orange;
}

#expandable{
  background-color:green;
  position:absolute;
  top:100%;
  width:50px;
  height:200px;
  z-index:999;
}

<div class="container red">
1
<button onclick="expand()">
expand
</button>
<div id="expandable" style="display:none;">

</div>

</div>
<hr>
<div class="container orange">
2
</div>

The problem is : I would like the green div to go in front of the other.

Here jsfiddle link : https://jsfiddle.net/8ure2159/

Please read [this answer](https://stackoverflow.com/a/20718728/10210841) and rethink your website's flow — Rojo, Jul 07 '21 at 12:48
Mmh thanks but it's not about positions but more about the transform part and stacking context.. :/ Do you follow? — Robin Delaporte, Jul 07 '21 at 12:59
Yes... stacking content is affected by positioning. Have you tried using `position: relative;` instead? — Rojo, Jul 07 '21 at 13:02

score 1 · Answer 1 · answered Jul 07 '21 at 12:50

Add a position to both containers, then position the red one higher than the orange one.

function expand() {
var x = document.getElementById('expandable')
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
  position: relative;
  width: 100%;
  height:100px;
}

.red {
  background-color:red;
  z-index: 2;
}

.orange {
  background-color:orange;
}

#expandable {
  background-color:green;
  position:absolute;
  top:100%;
  width:50px;
  height:200px;
}

<div class="container red">
  1
  <button onclick="expand()">expand</button>
  <div id="expandable" style="display:none;"> </div>
</div>
<hr>
<div class="container orange">2</div>

Very interesting ! Thanks ! It could work. The only problem is that my red, orange divs are generated automatically so the z-index trick is a bit tricky to implement but thanks !! — Robin Delaporte, Jul 07 '21 at 12:56

score 0 · Answer 2 · answered Jul 07 '21 at 13:01

This method brings the green box in front of both orange and red divs:

I moved #expandable outside of the red div and gave expandable a top position of 0 instead of 100%;

It's not clear as to whether you want that green box on top of both or one of the other divs.

function expand() {
  var x = document.getElementById('expandable')
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
  transform: translate(0);
  width: 100%;
  height: 100px;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

#expandable {
  background-color: green;
  position: absolute;
  top: 0;
  width: 50px;
  height: 200px;
  z-index: 999;
}

<div class="container red">
  1
  <button onclick="expand()">
    expand
  </button>
</div>

<div id="expandable" style="display:none;">

</div>
<hr>
<div class="container orange">
  2
</div>

z-index between two stacking contexts

2 Answers2