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

问题描述

标题是一个flexbox容器，有三个flexbox div可以在一个flexbox容器中工作。容器。覆盖我想覆盖其他三个div，但仍然限制在.header flexbox容器div。

我在stackoverflow和其他地方尝试了多个方法，但如何没有看到一个解决方案，在Flexbox中使用时可以解决覆盖或分层。

感谢您的任何建议！

链接到以下内容的jsfiddle：链接

HTML：

 < div class =header> 
< div class =headerLeft>左< / div> 
< div class =headerMiddle>中< / div> 
< div class =headerRight>右< / div> 
< div class =overlay> Overlay< / div> 
< / div> 
  

CSS：

 code> .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）; 
} 
  

解决方案

out代码，你在正确的轨道上与flex容器的相对定位。您只需要绝对定位叠加元素。

http：// jsfiddle。 net / UHECE / 4 /

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

 code> .header {
 position：relative; 
} 
 
 .overlay {
 position：absolute; 
 left：0; top：0; right：0; bottom：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屋！