Flexbox box-shadow webkit [duplicate] - html

Question

This question already has answers here:
css3 drop shadow under another div, z-index not working [duplicate]
(3 answers)
Closed 6 years ago.
I've tried to add box-shadow on my navbar and it seems like content covers it up.
.value,
.icon,
.text,
.date {
display: inline-flex;
height: 50px;
}
.current {
display: flex;
justify-content: center;
align-content: center;
height: 50px;
background: grey;
box-shadow: 0 2px 3px #000;
/* z-index doesn't help here */
z-index: 9999;
}
.current h1 {
margin: 5px 0;
color: #eee;
font-family: "Roboto", sans-serif;
}
.items {
min-height: 50px;
display: flex;
flex-direction: column;
}
.item {
height: 50px;
background: #eee;
border-bottom: 1px solid #aaa;
display: flex;
}
.icon {
width: 30px;
min-width: 30px;
justify-content: center;
}
.up {
background: #F1F8E9;
}
.down {
background: #FFEBEE;
}
.up > .icon {
background: #8BC34A;
}
.down > .icon {
background: #F44336;
}
.icon > span {
font-size: 20px;
height: 20px;
align-self: center;
color: #fff;
}
.value > span {
align-self: center;
font: 700 24px/24px "Roboto", sans-serif;
padding: 0 15px;
}
.up > .value > span {
color: #8BC34A;
}
.down > .value > span {
color: #F44336;
}
.text {
height: 50px;
}
.date {
margin-left: auto;
}
.text > span {
font: 500 16px/16px "Roboto", sans-serif;
padding: 10px 0 0 5px;
}
.date > span {
display: flex;
font: 600 12px/12px "Roboto", sans-serif;
padding: 0 5px 5px 0;
height: 15px;
align-self: flex-end;
}
<div id="current" class="current">
<h1 id="pocket">Box-shadow</h1>
</div>
<div id="items" class="items">
<div class="item up">
<div class="icon">
<span class="fa fa-arrow-up" aria-hidden="true"></span>
</div>
<div class="value">
<span>250</span>
</div>
<div class="text">
<span>First message</span>
</div>
<div class="date">
<span>20.09.2016</span>
</div>
</div>
<div class="item down">
<div class="icon">
<span class="fa fa-arrow-down" aria-hidden="true"></span>
</div>
<div class="value">
<span>250</span>
</div>
<div class="text">
<span>Second message</span>
</div>
<div class="date">
<span>20.09.2016</span>
</div>
</div>
</div>
I've also tried z-index property on my .current element but it didn't help. Is there a mistake in my code or should I use a certain property?

Answer 1

For z-index to work you need positioning, so add position: relative; to your .current
.value,
.icon,
.text,
.date {
display: inline-flex;
height: 50px;
}
.current {
display: flex;
justify-content: center;
align-content: center;
height: 50px;
background: grey;
box-shadow: 0 4px 6px #000;
z-index: 2;
position: relative;
}
.current h1 {
margin: 5px 0;
color: #eee;
font-family: "Roboto", sans-serif;
}
.items {
min-height: 50px;
display: flex;
flex-direction: column;
}
.item {
height: 50px;
background: #eee;
border-bottom: 1px solid #aaa;
display: flex;
}
.icon {
width: 30px;
min-width: 30px;
justify-content: center;
}
.up {
background: #F1F8E9;
}
.down {
background: #FFEBEE;
}
.up > .icon {
background: #8BC34A;
}
.down > .icon {
background: #F44336;
}
.icon > span {
font-size: 20px;
height: 20px;
align-self: center;
color: #fff;
}
.value > span {
align-self: center;
font: 700 24px/24px "Roboto", sans-serif;
padding: 0 15px;
}
.up > .value > span {
color: #8BC34A;
}
.down > .value > span {
color: #F44336;
}
.text {
height: 50px;
}
.date {
margin-left: auto;
}
.text > span {
font: 500 16px/16px "Roboto", sans-serif;
padding: 10px 0 0 5px;
}
.date > span {
display: flex;
font: 600 12px/12px "Roboto", sans-serif;
padding: 0 5px 5px 0;
height: 15px;
align-self: flex-end;
}
<div id="current" class="current">
<h1 id="pocket">Box-shadow</h1>
</div>
<div id="items" class="items">
<div class="item up">
<div class="icon">
<span class="fa fa-arrow-up" aria-hidden="true"></span>
</div>
<div class="value">
<span>250</span>
</div>
<div class="text">
<span>First message</span>
</div>
<div class="date">
<span>20.09.2016</span>
</div>
</div>
<div class="item down">
<div class="icon">
<span class="fa fa-arrow-down" aria-hidden="true"></span>
</div>
<div class="value">
<span>250</span>
</div>
<div class="text">
<span>Second message</span>
</div>
<div class="date">
<span>20.09.2016</span>
</div>
</div>
</div>