Html 在 flexbox 容器 div 中覆盖/悬停一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16109687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay / hover a div in flexbox container div
提问by karlgo
I'm trying to overlay a div that would float with in a flexbox container.
我正在尝试覆盖一个可以在 flexbox 容器中浮动的 div。
The header is a flexbox container and there are three flexbox divs that work in the container. The overlay I want to overlay the other three divs but still be constrained within the .header flexbox container div.
header 是一个 flexbox 容器，并且有三个 flexbox div 在容器中工作。我想覆盖其他三个 div 但仍然被限制在 .header flexbox 容器 div 内。
I've tried multiple methods on stackoverflow and elsewhere, but how not seen a solution that addresses overlay or layering when used in conjunction flexbox.
我已经在 stackoverflow 和其他地方尝试了多种方法，但是怎么没有看到与 flexbox 结合使用时解决覆盖或分层的解决方案。
Thank you for any suggestions!
感谢您的任何建议！
Link to the jsfiddle of the following: Link
链接到以下jsfiddle：链接
HTML:
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:
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);
}
回答by cimmanon
Looking at all of your commented out code, you were on the right track with the relative positioning on the flex container. You just needed to absolutely position your overlay element.
查看所有注释掉的代码，您在 flex 容器上的相对定位是正确的。您只需要绝对定位您的叠加元素。
Add/uncomment these styles:
添加/取消注释这些样式：
.header {
position: relative;
}
.overlay {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
