两个堆叠上下文之间的z索引

Question

我知道这个问题得到了广泛的回答，但我试图让一个来自堆叠上下文的ABSOLUTE元素放在另一个堆叠上下文之前。它把我逼疯了！

以下是我想要实现的：

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>

问题是：我希望绿色的div在另一个前面。

这里是jsfiddle链接：https://jsfiddle.net/8ure2159/

Answer 1

向两个容器添加一个position，然后将红色容器放置在比橙色容器高的位置。

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

此方法将绿色框放在橙色和红色div前面：

我将#expandable移到红色div之外，并使expandable的顶部位置为0而不是100%；

目前还不清楚你是想把绿框放在两个div上，还是想放在另一个div上。

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>