CSS圖像和Z索引

所以我總共顯示3個圖像，其中2個需要比另一個圖像更高的Z索引，因此2個圖像都在一個圖像上方。我在我的CSS做到了這一點：CSS圖像和Z索引

#cover { 
    background: url("my_name.png"); 
    position: absolute; 
    left: -200px; 
    z-index: 10; 
} 

#twitterImg { 
    overflow: hidden; 
    background: #3C3C3C; 
    margin-left: -330px; 
    margin-top: -70px; 
    z-index: 20; 
} 

#youtubeImg { 
    overflow: hidden; 
    background: #3C3C3C; 
    margin-left: 410px; 
    margin-top: -130px; 
    z-index: 21; 
}

雖然它會產生這樣的：

其中圖像封面圖片下。我不認爲這兩個圖像是兒童，他們應該是獨立的，雖然這是我的HTML只是在你想要審查它。

Pastebin Because HTML is weird on stack overflow

Full CSS

來源

2015-12-22 Robinlemon

z-index將無法正常工作，而你沒有設置位置，設置position到relative ..你可以試試這個

#twitterImg { 
    position : relative; 
    overflow: hidden; 
    background: #3C3C3C; 
    margin-left: -330px; 
    margin-top: -70px; 
    z-index: 20; 
} 

#youtubeImg { 
    position : relative; 
    overflow: hidden; 
    background: #3C3C3C; 
    margin-left: 410px; 
    margin-top: -130px; 
    z-index: 21; 
}

，或者你可以設置

#navigation { 
    position : relative; 
    width: 638px; 
    height: 80px; 
    font-family: Roboto; 
    font-size: 11px; 
    font-weight: bold; 
    padding-top: 10px; 
    text-transform: uppercase; 
    margin: 0 auto; 
    z-index: 21; 
}

這是圖像，一切都在你的網站http://darklegionrp.byethost24.com/

來源

2015-12-22 00:54:25

我是否需要改變蓋類，以便爲1的Z指數正常工作？因爲我仍然得到[this]（https://i.gyazo.com/f9268f739fd571a37a4318b36d36777b.png） – Robinlemon

@GenaratedPixelz你總是可以使用z-index來滿足你在網站上的需求..你可以使代碼z-index：1 ;和＃導航z-index：2例如 –

這似乎並不奏效。 [鏈接！]（http://pastebin.com/VRHt4aiC）[錯誤]（https://i.gyazo.com/6f5c0d46315e01cac715b64155eee272.png） – Robinlemon

CSS圖像和Z索引

回答

相關問題