CSS Drop-Shadow на навигационной панели с фоновым изображением

Question

У меня есть панель навигации в верхней части страницы с box-shadow, но она, похоже, не относится к элементу section ниже с фоном. Если я прокомментирую атрибут background, тень станет очевидной.

Вот codepen: http://codepen.io/himmel/pen/ByxeGR

Вот разметка:

<div class="header"> 
    <span class="brand">BRAND</span> 
    <ul class="link"> 
    <li>Home</li> 
    <li>About</li> 
    <li>Contact</li> 
    </ul> 
</div> 

<div class="blog-container"> 
    <section> 

    </section> 
</div> 

А вот CSS:

body { 
    margin: 0; 
} 

.header { 
    display: flex; 
    align-items: center; 
    font-family: 'Nunito'; 
    width: 100%; 
    background-color: white; 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 
    height: 4em; 
    .brand { 
    font-size: 1.3em; 
    padding-left: 1em; 
    } 
    .link { 
    display: flex; 
    list-style-type: none; 
    flex: 1 auto; // stretch to end of width 
    justify-content: flex-end; 
    margin: 0; 
    font-size: 1.3em; 
    li { 
     padding-right: 1em; 
    } 
    } 
} 

.blog-container { 
    display: flex; 
    flex-flow: column wrap; 
    background: url(https://unsplash.imgix.net/photo-1414490929659-9a12b7e31907?q=75&fm=jpg&s=f838066e7aa9eab9d1ccc28fd5ec9574) no-repeat center center fixed; 
    background-size: cover; 
    section { 
    height: 20em; 
    } 
} 

Как я могу получить падающая тень появляться над фоновое изображение?

Answer 1

Вы можете добавить position: relative; в свой .header стиль.

http://codepen.io/anon/pen/YPLoGN

Answer 2

Я раздвоенный ваш пример на codepen: Link

position: relative; 

Вам нужно добавить позицию в заголовок для того, чтобы работать должным образом. (Я добавил также z-index, но родственник, похоже, исправил вашу проблему.) Кредиты для автора ниже меня.