17

According to flexbox specification:

..4.3. Flex Item Z-Ordering ,... and z-index values other than auto create a stacking context even if position is static.

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Paulo Janeiro
  • 3,181
  • 4
  • 28
  • 46

1 Answers1

17

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, and z-index values other than auto create a stacking context even if position is static.

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701