如何讓一個內部塊始終在其他層上？

我有一個關於標題，橫幅和菜單的基本設計。菜單放在標題欄中，標題使用相同的z-index與標題位於同一圖層。無論我設置到菜單中的z-index的數量多於橫幅，菜單仍然位於橫幅的後面。以下是我所申請的代碼，我如何始終將菜單始終放在任何圖層上？如何讓一個內部塊始終在其他層上？

演示可以從http://jsfiddle.net/yckelvin/s0690n29/

HTML中找到

<div class="header">Header Area 
    <div class="menu">Menu Area</div> 
</div> 
<div class="banner">Banner</div>

CSS

div { 
    display: block; 
    position: relative; 
    height: 100px; 
    width: 100px; 
} 
.header { 
    z-index: 10; 
    width: 100%; 
    background-color: rgba(255, 0, 0, 0.5) !important; 
} 
.menu { 
    background-color: rgba(0, 255, 0, 0.5); 
    margin-top: 20px; 
    margin-left: auto; 
    margin-right: 5%; 
    height: 300px; 
    z-index: 20; 
} 
.banner { 
    background-color: rgba(0, 0, 255, 0.8); 
    margin-top -10px; 
    width: 100%; 
    z-index:10; 
}

來源

2014-10-12 Kelvin

請參閱：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context和http://www.w3.org/TR/CSS21/zindex.html – 2014-10-12 08:39:15

您必須設置z-index的頭比橫幅更大：

div { 
    display: block; 
    position: relative; 
    height: 100px; 
    width: 100px; 
} 
.header { 
    z-index: 20; /* change this */ 
    width: 100%; 
    background-color: rgba(255, 0, 0, 0.5) !important; 
} 
.menu { 
    background-color: rgba(0, 255, 0, 0.5); 
    margin-top: 20px; 
    margin-left: auto; 
    margin-right: 5%; 
    height: 300px; 
    z-index: 20; 
} 
.banner { 
    background-color: rgba(0, 0, 255, 0.8); 
    margin-top -10px; 
    width: 100%; 
    z-index:10; 
}

http://jsfiddle.net/s0690n29/1/

來源

2014-10-12 08:37:48

就我而言，我將高度設置爲標題爲100像素，是沒有問題的，但是如何，如果我設置爲auto，並取決於它的內容頭的高度是可調的？當我將標題的高度更改爲自動標題時，橫幅將被放下，菜單完全位於標題內，但看起來不像它的頂部。結果在http://jsfiddle.net/s0690n29/1/ – Kelvin 2014-10-12 08:44:22

比你必須讓你的菜單已經'position'設置成'absolute'和解決它 – 2014-10-12 08:50:03

如何讓一個內部塊始終在其他層上？

回答

相關問題