如何正確使用z-index控制我的div的排序順序？

Question

我有一個下拉菜單（#dropDownMenu），當我的網站的「#headerNav」懸停時出現。如果我將#dropDownMenu（最初隱藏着display：none，直到鏈接懸停）放在#headerNav div上，它才能正常工作。

這樣可以防止在光標出現時沒有快速移動到下拉菜單時導致的輕微閃爍。通過在#headerNav上稍微重疊#dropDownMenu，這使得它看起來像#headerNav仍然在光標實際上在#dropDownMenu中時被懸停。

無論如何，我現在想隱藏頭部或#headerContent後面的#dropDownMenu的重疊部分，所以一切都看起來整潔，所以下拉菜單實際上看起來像它出現在#headerNav下。

我已經嘗試了不同的z-index設置，沒有人似乎工作，這是很煩人的。當我將#headerNav：hover #dropDownMenu的z-index設置爲-1時，它隱藏在所有內容的後面。

如果我將header或#headerContent的z-index設置爲高於「#headerNav：hover＃dropDownMenu」的數字，那麼將鼠標懸停在#headerNav上並沒有區別。我仍然可以看到#dropDownMenu重疊。

CSS：

header { 

    position:fixed; 
    top:0; 
    right:0; 
    left:0; 
    height: 40px; 
    z-index:20; 
    } 

    #headerContent { 
    background-color: $main-background-color; 
    width: $site-width; 
    margin:0px auto 0px auto; 
    height:40px; 

    } 

    #headerNav { 
    float:right; 
    height:37px; 
    width:auto; 
    margin-top:1px; 
    background-color:#464646; 
    color:#cccccc; 
    } 

    #headerNav:hover { 
    background-color:#626262; 
    cursor:pointer; 
    color: white; 
    } 

    #headerNav:hover #dropDownMenu { 
    position:absolute; 
    background-color:white; 
    border:1px solid gray; 
    top:35px; 
    right:-39px; 
    height:300px; 
    width:200px; 
    font-weight:bold; 
    color:gray; 
    display:block !important; 
    z-index:1; 
    } 

    ul li { 
    float:right; 
    } 

    #photoThumbnail img { 
    height:28px; 
    width:31px; 
    padding-top:5px; 
    padding-right:8px; 
    -moz-border-radius: 1px 12px 1px 12px; 
    border-radius: 1px 12px 1px 12px; 

    } 

    #currentUser { 
    position:relative; 
    padding-top:12px; 
    padding-left:12px; 
    padding-right:6px; 
    } 


    #siteNavigation { 
    display:none; 

    } 

HTML

<header> 
    <div id='headerContent'> 
    <div id='LogoHolder'> 
    </div> 
    <nav id='headerNav'> 
     <ul> 
     <li id='photoThumbnail'></li> 
     <li id='currentUser'> 
      <ul id='dropDownMenu'> 
      <li>link1</li> 
      <li>link2</li> 
      <li>link3</li> 
      <li>link4</li> 
      <li>link5</li> 
      <li>link6</li> 
      </ul> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</header> 

實施例和修正將不勝感激。

親切的問候

Answer 1

如果您的z-index設置被忽略，則可能需要添加位置屬性，將其設置爲相對位置或任何需要的位置屬性。我很確定如果position屬性沒有設置，z-index會被忽略。

Answer 2

我想你會發現你在試圖破解圍繞一個根本問題，標記你的方式。通常的方式做UL基於下拉菜單是這樣的

<ul id='headerNav'> 
    <li>Menu Title 
     <ul class='dropDownMenu> 
      <li>link1</li> 
      <li>link2</li> 
     </ul> 
    </li> 
</ul> 

這樣你設置#headerNav李懸停動作：hover和你的下拉是你的懸停元素的子菜單將繼續開放（和當你將鼠標移動到.dropDownMenu上時，它也會被徘徊。你接近..你只需要包裝你的HTML好一點，並調整你的CSS懸停在李和顯示並隱藏「李ul.dropDownMenu」

這應該擺脫你的重疊需要 - 並解決你的問題。