html – 覆盖悬停Flexbox容器div中的div

概述我正在尝试覆盖一个可以在flexbox容器中浮动的div. 标头是一个flexbox容器,有三个flexbox div在容器中工作.覆盖我想覆盖其他三个div但仍然受限于.header flexbox容器div. 我已经在stackoverflow和其他地方尝试了多种方法,但是当结合使用flexbox时,怎么没有看到解决覆盖或分层的解决方案. 谢谢你的任何建议！ 链接到以下的jsfiddle：Li 我正在尝试覆盖一个可以在flexBox容器中浮动的div.

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

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

谢谢你的任何建议！

链接到以下的Jsfiddle：Link

HTML：

<div >    <div >left</div>    <div >MIDdle</div>    <div >Right</div>    <div >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.3);}

解决方法 查看所有已注释掉的代码,您就可以在flex容器上找到相对定位的正确轨道.你只需要绝对定位你的叠加元素.

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

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

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

总结

以上是内存溢出为你收集整理的html – 覆盖/悬停Flexbox容器div中的div全部内容，希望文章能够帮你解决html – 覆盖/悬停Flexbox容器div中的div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。