在 flexbox 容器 div 中覆盖/悬停一个 div [英] Overlay / hover a div in flexbox container div

问题描述

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

header 是一个 flexbox 容器，并且有 3 个 flexbox div 在容器中工作.我想覆盖其他三个 div 但仍被限制在 .header flexbox 容器 div 内的叠加层.

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

感谢您的任何建议！

链接到以下jsfiddle:链接

HTML:

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

CSS:

.header {边框:3px纯橙色；宽度:100%；显示:-webkit-flex；显示:弹性；z-索引:0；}.headerLeft {边框:2px 实心黄绿色；-webkit-flex: 1;弹性:1；z-索引:1；}.headerMiddle {边框:2px 实心黑兰花；-webkit-flex: 1;弹性:1；z-索引:1；}.headerRight {边框:2px 实心暗橙色；-webkit-flex: 1;弹性:1；z-索引:1；}.overlay {边框:2px纯绿色；z-索引:10；背景:RGBA(0,0,0,0.3)；}

解决方案

查看所有注释掉的代码，您在 flex 容器上的相对定位是正确的.您只需要绝对定位您的叠加元素.

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

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

.header {位置:相对；}.overlay {位置:绝对；左:0；顶部:0；右:0；底部:0；}

I'm trying to overlay a div that would float with in a flexbox container.

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.

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.

Thank you for any suggestions!

Link to the jsfiddle of the following: Link

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

解决方案

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.

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

Add/uncomment these styles:

.header {
    position: relative;
}

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

这篇关于在 flexbox 容器 div 中覆盖/悬停一个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！