Flexbox box-shadow webkit

Question

我試着在我的導航欄上添加框陰影，它好像內容覆蓋了它。

.value, 
 
.icon, 
 
.text, 
 
.date { 
 
    display: inline-flex; 
 
    height: 50px; 
 
} 
 

 
.current { 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t height: 50px; 
 
\t background: grey; 
 
\t 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 { 
 
\t min-height: 50px; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 

 
.item { 
 
\t height: 50px; 
 
\t background: #eee; 
 
\t border-bottom: 1px solid #aaa; 
 
\t display: flex; 
 
} 
 

 
.icon { 
 
\t width: 30px; 
 
\t min-width: 30px; 
 
\t justify-content: center; 
 
\t 
 
} 
 

 
.up { 
 
\t background: #F1F8E9; 
 
} 
 

 
.down { 
 
\t background: #FFEBEE; 
 
} 
 

 
.up > .icon { 
 
\t background: #8BC34A; 
 
} 
 

 
.down > .icon { 
 
\t background: #F44336; 
 
} 
 

 
.icon > span { 
 
\t font-size: 20px; 
 
\t height: 20px; 
 
\t align-self: center; 
 
\t color: #fff; 
 
} 
 

 
.value > span { 
 
\t align-self: center; 
 
\t font: 700 24px/24px "Roboto", sans-serif; 
 
\t padding: 0 15px; 
 
} 
 

 
.up > .value > span { 
 
\t color: #8BC34A; 
 
} 
 

 
.down > .value > span { 
 
\t color: #F44336; 
 
} 
 

 
.text { 
 
\t height: 50px; 
 
} 
 

 
.date { 
 
\t margin-left: auto; 
 
} 
 

 
.text > span { 
 
\t font: 500 16px/16px "Roboto", sans-serif; 
 
\t padding: 10px 0 0 5px; 
 
} 
 

 
.date > span { 
 
\t display: flex; 
 
\t font: 600 12px/12px "Roboto", sans-serif; 
 
\t padding: 0 5px 5px 0; 
 
\t height: 15px; 
 
\t align-self: flex-end; 
 
}

<div id="current" class="current"> 
 
\t \t <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>

我也試過z-index財產我.current元素，但它並沒有幫助。我的代碼中是否有錯誤，或者我應該使用某個屬性？

Answer 1

對於z-index工作，你需要定位，所以加position: relative;您.current

.value, 
 
.icon, 
 
.text, 
 
.date { 
 
    display: inline-flex; 
 
    height: 50px; 
 
} 
 

 
.current { 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-content: center; 
 
\t height: 50px; 
 
\t background: grey; 
 
\t box-shadow: 0 4px 6px #000; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
.current h1 { 
 
    margin: 5px 0; 
 
    color: #eee; 
 
    font-family: "Roboto", sans-serif; 
 
} 
 

 
.items { 
 
\t min-height: 50px; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 

 
.item { 
 
\t height: 50px; 
 
\t background: #eee; 
 
\t border-bottom: 1px solid #aaa; 
 
\t display: flex; 
 
} 
 

 
.icon { 
 
\t width: 30px; 
 
\t min-width: 30px; 
 
\t justify-content: center; 
 
\t 
 
} 
 

 
.up { 
 
\t background: #F1F8E9; 
 
} 
 

 
.down { 
 
\t background: #FFEBEE; 
 
} 
 

 
.up > .icon { 
 
\t background: #8BC34A; 
 
} 
 

 
.down > .icon { 
 
\t background: #F44336; 
 
} 
 

 
.icon > span { 
 
\t font-size: 20px; 
 
\t height: 20px; 
 
\t align-self: center; 
 
\t color: #fff; 
 
} 
 

 
.value > span { 
 
\t align-self: center; 
 
\t font: 700 24px/24px "Roboto", sans-serif; 
 
\t padding: 0 15px; 
 
} 
 

 
.up > .value > span { 
 
\t color: #8BC34A; 
 
} 
 

 
.down > .value > span { 
 
\t color: #F44336; 
 
} 
 

 
.text { 
 
\t height: 50px; 
 
} 
 

 
.date { 
 
\t margin-left: auto; 
 
} 
 

 
.text > span { 
 
\t font: 500 16px/16px "Roboto", sans-serif; 
 
\t padding: 10px 0 0 5px; 
 
} 
 

 
.date > span { 
 
\t display: flex; 
 
\t font: 600 12px/12px "Roboto", sans-serif; 
 
\t padding: 0 5px 5px 0; 
 
\t height: 15px; 
 
\t align-self: flex-end; 
 
}

<div id="current" class="current"> 
 
\t \t <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>