覆盖/悬停一个div到Flexbox的div容器(Overlay / hover a div in

我试图覆盖一个div会漂浮在一个Flexbox的容器。

标题是Flexbox的容器，并且有在容器中工作3个Flexbox的申报单。 我想覆盖其他三个申报单，但仍是可以叠加的.header Flexbox的容器专区内限制。

我试过计算器上的多种方法和其他地方，但怎么没见结合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;
}

文章来源: Overlay / hover a div in flexbox container div