z-index em elementos aninhados absolutamente posicionados
Eu tenho algumas caixas absolutamente posicionadas. Um deles tem aninhado popup, maior que a caixa. Eu quero fazer aparecer na frente de todas as caixas.
Configuraçãoz-index: 100
em caixas ez-index: 200
no pop-up não ajuda. As caixas que entram na ordem doc após a caixa com o pop-up parecem estar sobre o pop-up. O que eu sinto falta sobre os índices z?
div {
border: 1px solid black;
}
.container {
position: relative;
}
.foo {
position: absolute;
background-color: white;
width: 5em;
z-index: 100;
}
#b0 {
top: 0em;
left: 0em;
}
#b1 {
top: 3em;
left: 1em;
}
#b2 {
top: 6em;
left: 2em;
}
#b3 {
top: 9em;
left: 3em;
}
#b4 {
top: 12em;
left: 4em;
}
.popup {
z-index: 200;
position: absolute;
left: 1em;
top: -1em;
width: 8em;
height: 8em;
background-color: grey;
}
<div class="container">
<div class="foo" id="b0">
<span>absolute box b0</span>
</div>
<div class="foo" id="b1">
<span>absolute box b1</span>
<div class="popup">
popup box inside b1
</div>
</div>
<div class="foo" id="b2">
<span>absolute box b2</span>
</div>
<div class="foo" id="b3">
<span>absolute box b3</span>
</div>
</div>