z-index between two stacking contexts - html

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/

Answer 1

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>

Answer 2

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>