Z-index doesn't work with flex elements? [duplicate] - css

Question

This question already has answers here:
Flexbox, z-index & position: static: Why isn't it working?
(1 answer)
Understanding z-index stacking order
(1 answer)
Closed 5 years ago.
I'm trying to have two columns, one being a menu which can expand and overlap the other column. But I used a flex element to wrap these columns and my menu expands behind the other element, even with a greater z-index.
The render is something like this:
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
nav {
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}
<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Title</h2>
<p>This is a text.</p>
</div>
</div>
</div>
See? I want my menu to overlap the rest of my page when expanding. How can I do that?

Answer 1

The z-index property only effects elements that have a position value other than static (the default) or are flex items (direct children of display: flex or display: inline-flex).
There are two options to make the z-index work in your case:
Set the z-index to the 1st .maincolumn, which is a flexbox item:
.maincolumn:first-child {
z-index: 1;
}
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
.maincolumn:first-child {
z-index: 1;
}
nav {
height: 100%;
width: 8em;
background-color: black;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}
<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Titre</h2>
<p>This is a text.</p>
</div>
</div>
</div>
or
Set position: relative to nav:
nav {
position: relative;
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
nav {
position: relative;
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}
<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Titre</h2>
<p>This is a text.</p>
</div>
</div>
</div>

Answer 2

Flex items are only direct children of flex-container.
Flex items respect z-index order, but you are applying z-index not to flex-items but to their descendants.
From w3c flexbox spec:
Flex items paint exactly the same as inline blocks CSS21, 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.
So for this to work you should apply greater z-index to your first flex item. Demo:
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
.maincolumn:first-child {
z-index: 1;
}
nav {
height: 100%;
width: 8em;
background-color: black;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}
<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Title</h2>
<p>This is a text.</p>
</div>
</div>
</div>