html如何实现容器模块覆盖,html – 覆盖/悬停Flexbox容器div中的div

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

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

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

谢谢你的任何建议！

链接到以下的jsfiddle：Link

HTML：

Left

Middle

Right

Overlay

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);

}