覆盖/悬停Flexbox容器div中的div

Question

我正在尝试覆盖一个可以在flexbox容器中浮动的div.

标头是一个flexbox容器,有三个flexbox div在容器中工作.覆盖我想覆盖其他三个div但仍然受限于.header flexbox容器div.

我已经在stackoverflow和其他地方尝试了多种方法,但是当结合使用flexbox时,怎么没有看到解决覆盖或分层的解决方案.

谢谢你的任何建议!

链接到以下jsfiddle:链接

HTML:

<div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerMiddle">Middle</div>
    <div class="headerRight">Right</div>
    <div class="overlay">Overlay</div>
</div>

CSS:

.header {
    border: 3px solid orange;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    z-index: 0;
}

.headerLeft {
    border: 2px solid chartreuse;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}
.headerMiddle {
    border: 2px solid darkorchid;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}
.headerRight {
    border: 2px solid darkorange;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}

.overlay {
    border: 2px solid green;
    z-index: 10;
    background: rgba(0,0,0,0.3);
}

Answer 1

查看所有已注释掉的代码,您在灵活容器上的相对位置处于正确的轨道上.你只需要绝对定位你的叠加元素.

http://jsfiddle.net/UHECE/4/

添加/取消注释这些样式:

.header {
    position: relative;
}

.overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
}