Моя коробочная тень покрывается изображением

Question

Если вы посмотрите здесь на http://jsfiddle.net/nqugcutn/, вы заметите, что тень окна на моем заголовке покрывается содержимым, которое имеет фон изображения. (Простите недостающий шрифт). Как я могу получить тень коробки?

/* Header */ 

.header { 
    background: linear-gradient(#ffffff, #f5f5f5); 
    width: 100%; 
    margin-top: 0; 
    height: 75px; 
    border-top: 5px solid #1379DB; 
    box-shadow: 1px 1px 5px #000; 
    z-index: 1; 
} 

.logoName { 
    color: #000; 
    font-family: Lobster, sans-serif; 
    font-size: 30px; 
    margin: 20px 20px; 
    float: left; 
} 

/* Content */ 

.container { 
    background-image: url(http://i.imgur.com/ScGxG2b.png); 
    background-size: cover; 
    background-color: #242424; 
    height: 1000px; 
    width: 100%; 
    z-index: 2; 
} 

Заранее благодарен!

Answer 1

Добавление position: relative; в ваш .header div приведет к тому, что рамная тень появится над фоновым изображением. Вот демо:

/* Header */ 
 

 
.header { 
 
    background: linear-gradient(#ffffff, #f5f5f5); 
 
    width: 100%; 
 
    margin-top: 0; 
 
    height: 75px; 
 
    border-top: 5px solid #1379DB; 
 
    box-shadow: 1px 1px 5px #000; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 
.logoName { 
 
    color: #000; 
 
    font-family: Lobster, sans-serif; 
 
    font-size: 30px; 
 
    margin: 20px 20px; 
 
    float: left; 
 
} 
 
.header ul { 
 
    list-style-type: none; 
 
    margin-top: 20px; 
 
    margin-right: 250px; 
 
    float: right; 
 
} 
 
.header ul li { 
 
    display: inline-block; 
 
    font-family: Montserrat, sans-serif; 
 
    color: #333; 
 
    font-size: 20px; 
 
    padding: 10px 10px; 
 
} 
 
.header ul li a { 
 
    font-family: Montserrat, sans-serif; 
 
    color: #333; 
 
    font-size: 20px; 
 
} 
 
.header ul li a:hover, 
 
.header ul li a:active { 
 
    border-bottom: #1379DB solid; 
 
    color: #000; 
 
} 
 
.header ul li a:link { 
 
    text-decoration: none; 
 
} 
 
/* Content */ 
 

 
.container { 
 
    background-image: url(http://i.imgur.com/ScGxG2b.png); 
 
    background-size: cover; 
 
    background-color: #242424; 
 
    height: 1000px; 
 
    width: 100%; 
 
    z-index: 2; 
 
}

<div class="header"> 
 
    <h1 class="logoName">Company Name</h1> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="/showcase">Showcase</a> 
 
    </li> 
 
    <li><a href="/message">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="container"> 
 
</div>

jsFiddle demo.