我的箱子陰影被圖像覆蓋

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。