文字在圖像，導航欄「下」圖像

Question

我想在圖像和臨時navbar上獲得標題。 z-index是無用的，我嘗試了很多其他的東西。

CSS

.text { 
    text-align: center; 
    color: red; 
    font-family: fantasy; 
    font-size: 120px; 
    z-index: 1; 
} 

.image { 
    position: relative; 
    z-index: -1; 
} 

.nav { 
    height: 35px; 
    width: 900px; 
    background: #72a0c1; 
    margin: auto; 
    z-index: 2; 
} 

.nav ul { 
    margin: 0; 
    padding: 0; 
} 

.nav ul li { 
    list-style: none; 
} 

.nav ul li a { 
    text-decoration: none; 
    float: left; 
    display: block; 
    padding: 0px 50px; 
    font-family: fantasy; 
    font-size: 30px; 
} 

Fiddle

Answer 1

給absolute，而不是relative圖像類。

的CSS：

.image { 
    position: absolute; 
    top: 0; 
    z-index: -1; 
} 

Working Fiddle

注：Post your sample code in SO. Don't post link here。

Answer 2

嘗試在CSS中使用可以幫助你

.image { 
    position: relative; 
} 
.text { 
    top: 0; 
    z-index:1; 
} 

.nav { 
    position: absolute; 
    top: 0; 
    z-index: 1; 
}