使用z-index將某些對象放在後面，其他人在前面

我的頁面上有一個水平導航欄，它向下推動幾個像素以與下面div的內容重疊。我想在內容div的背景後面放置一些鏈接，但是我無法找到一種方法來保留前面的某些鏈接（例如當前頁面的鏈接）。以下是我有：使用z-index將某些對象放在後面，其他人在前面

<div id="header"> 
    <ul id="nav"> 
    <li><a href="index.php" class="index">index</a></li> 
    <li><a href="project.php" class="project">project[]</a></li> 
    <li><a href="contact.php" class="contact">contact</a></li> 
    <li><a href="about.php" class="about">about</a></li> 
    </ul> 
</div> 
<div id="content"> 
</div>

相關CSS：

div#content { 
     background:#444; 
     border-radius:15px; 
     padding:40px 30px 30px 30px; 
     clear:left 
    } 
div#header { 
     position: relative; 
     margin-left:20px; 
     top: 13px; 
    } 


ul#nav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 

} 

ul#nav li { 
    display:inline; 
} 

ul#nav a { 
    text-decoration:none; 
    color: #444; 
    font-size: 30px; 
}

我使用的是類的每一個環節，以確定它是否指向當前頁面，所以我想鏈接到伸出。問題是每個這些的堆棧上下文都在div或ul中。

來源

2012-01-27 Rahat Ahmed

您需要包含您的CSS – 2012-01-27 13:18:54

對不起，我無法訪問我的CSS。 – 2012-01-27 13:23:56

試試這個小提琴：http://jsfiddle.net/PNC7g/：我試圖在IE7 +和Firefox 9

的想法是設置position: relative; z-index: 1到#content和每link和內容具有定義的屬性top: -13px。即使它們共享相同的Z索引順序位置，#content也是在鏈接列表（標記內）之後定義的，因此它將與導航菜單重疊。

但是，如果您稍後將z-index: 2設置爲鏈接（帶有特殊類，如.current），則所選項目將能夠與div重疊。

來源

2012-01-27 13:48:35 fcalderan

謝謝，完美的作品！ – 2012-01-27 14:51:32

+1使用z-index值1和2而不是愚蠢的值，如1000和2000，就像你經常看到不懂z-索引的人使用的那樣。 – 2012-01-27 14:52:28

@MrLister我通常設置一個10分的z-索引，以防萬一其他事情應該在後面插入兩個定位元素（並且不要觸及其他z-索引）。對於這個例子1和2就足以讓這個例子變得清晰。 – fcalderan 2012-01-27 14:55:34

使用z-index將某些對象放在後面，其他人在前面

回答

相關問題