Menu
According to flexbox specification:
..4.3. Flex Item Z-Ordering ,... and
z-indexvalues other thanautocreate a stacking context even ifpositionisstatic.
So, I thought z-index / opacity is supposed to work as usual with flexbox but when I apply it to this HTML/CSS it doesn't work (my goal was to put .header on top of .core creating two layers):
.header {
opacity: 0.5;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
.headerLeft {
z-index: inherit;
background-color: blue;
text-align: right;
align-self: stretch;
flex: 2 1 250px;
}
.headerCenter {
z-index: inherit;
background-color: red;
text-align: right;
align-self: stretch;
flex: 1 1 175px;
}
.headerRight {
z-index: inherit;
background-color: green;
text-align: right;
align-self: stretch;
flex: 1 1 100px;
}
.core {
z-index: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
.coreItem {
align-self: stretch;
flex: 1 1 400px;
}<body>
<div class="header">
<div class="headerLeft">Left</div>
<div class="headerCenter">Center</div>
<div class="headerRight">Right</div>
</div>
<div class="core">
<div class="coreItem">Core1</div>
<div class="coreItem">Core2</div>
<div class="coreItem">Core3</div>
<div class="coreItem">Core4</div>
<div class="coreItem">Core5</div>
<div class="coreItem">Core6</div>
</div>
</body>I used proper prefixes on flex properties. I don't understand why it's not working.
804
Based on what we've discussed above, we can set the z-index property of its flex items, even if they aren't positioned elements (i.e. they have position: static ). Notice that when we add z-index: 2 to the flex items by clicking the button in the demo above, they are positioned on top of the .
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.
Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container.
Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned elements.
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that
order-modified document order is used in place of raw document order, andz-indexvalues other thanautocreate a stacking context even ifpositionisstatic.
The reason z-index isn't working in your code is that div.header and div.core are not flex items. They are children of body, but body is not a flex container.
In order for z-index to work here, you'll need to apply display: flex to body.
Add this to your code:
body {
display: flex;
flex-direction: column;
}
Revised Demo
More details: https://stackoverflow.com/a/35772825/3597276
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
