CSS z-index沒有正確堆疊

我在CSS z-index堆棧時遇到了問題。CSS z-index沒有正確堆疊

HTML：

<ul> 
    <li><a href="#">Title 1</a></li> 
    <li class="dropMenu"><a href="#">Title 2</a> 
     <div class="containerDropDown"> 
      <ul class="menu"> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
      </ul> 
     </div> 
    </li> 
    <li><a href="#">Title 3</a></li> 
    <li><a href="#">Title 4</a></li> 
    <li><a href="#">Title 5</a></li> 
</ul>

CSS：

li.dropMenu { 
    z-index:100; 
} 
.dropMenu:hover { 
    padding-bottom:9px; 
    border:1px solid #575a5d; 
    border-bottom:0; 
    background-color:#434749; 
    position:relative; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 10px #000; 
    z-index:100; 
} 
.dropMenu:hover a { 
    padding:0 9px; 
    color:#8f6f4d; 
} 
.dropMenu ul { 
    width:198px; 
    left:-999em; 
    padding:16px 0 0 0; 
    border:1px solid #575a5d; 
    background-color:#434749; 
    position:absolute; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 5px #000; 
} 
.dropMenu:hover ul { 
    /*top:32px;*/ 
    top:10px; 
    left:-1px; 
    z-index:20; 
} 
.dropMenu ul li { 
    display:block; 
    width:100%; 
    padding:0; 
    z-index:70; 
} 
.dropMenu:hover ul li a, 
.dropMenu ul li a{ 
    display:block; 
    padding:0 30px 22px 30px; 
    font-size:0.8em; 
    color:#d0cfcb; 
    background:transparent url("/images/background/dropDownMenu-arrow.gif") no-repeat 21px 4px; 
}

我需要li.dropMenu有較高的堆疊順序比其子ul。我試圖改變z-索引，但沒有運氣。有沒有人知道任何解決方案？我試圖創建一個簡單的下拉菜單，但孩子UL似乎總是在父母li.dropMenu之上。

我給一箱陰影給孩子ul但由於其總在最前面的陰影越過li.dropMenu

來源

2011-09-27 Steven Wu

你需要在你的CSS設置position屬性（比static除外）每個元素你想用z-index就可以了。

來源

2011-09-27 13:56:49

您需要給li.dropMenu a position才能使z-index正常工作。

嘗試

li.dropMenu { 
    z-index:100; 
    position:relative; 
}

更多資訊：

z索引指定框的層疊級別其位置值是一個的絕對的，固定的，或相對的。

http://reference.sitepoint.com/css/z-index

來源

2011-09-27 13:58:02

z索引僅適用於定位元素（位置：絕對的，位置：相對的，或位置是：固定）。

來源

2011-09-27 13:59:20

你有一個問題，就是絕對定位的元素相對於它最接近的祖先而言是非靜態的（即相對的，絕對的，固定的）定位。因此，您的子Z-index僅適用於父元素的上下文中，而不是與其相比。解決方案：將母公司在孩子的兄弟姐妹的內容：

<ul> 
    <li><a href="#">Title 1</a></li> 
    <li class="dropMenu"> 
     <div class="parentItemHolder"><a href="#">Title 2</a></div> 
     <div class="containerDropDown"> 
      <ul class="menu"> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
      </ul> 
     </div> 
    </li> 
    <li><a href="#">Title 3</a></li> 
    <li><a href="#">Title 4</a></li> 
    <li><a href="#">Title 5</a></li> 
</ul>

隨着CSS（注意，我已經刪除了一些原有的爲了簡潔）：

.dropMenu { 
    position: relative; 
} 
.dropMenu:hover div.parentItemHolder { 
    padding-bottom:9px; 
    border:1px solid #575a5d; 
    border-bottom:0; 
    background-color:#434749; 
    position:relative; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 10px #000; 
    z-index:100; 
} 
.dropMenu ul { 
    width:198px; 
    display: none; /* using display: none; instead of left: -999em; */ 
    padding:16px 0 0 0; 
    border:1px solid #575a5d; 
    background-color:#434749; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 5px #000; 
} 
.dropMenu:hover ul { 
    display: block; 
    position: absolute; 
    z-index:20; 
}

來源

2011-09-27 14:05:01 megaflop

謝謝，這真的有幫助。然而，我想通過在底部添加一些填充來增加li.dropMenu的風格，這種填充一直在推動令人討厭的父div。所以現在正在尋找一種方法。 –

嘗試應用任何樣式到'li.dropMenu div.parentItemHolder'而不是'li.dropMenu' – megaflop

謝謝你的幫助真的很感激它 - 你救了我的生命 –

開始通過除去z折射率

，那麼你應該把目標定在兄弟姐妹a和.containerDropDown，或刪除.containerDropDown，只是使用ul代替。

，那麼你只需要添加：

.dropMenu>a{position:relative;z-index:2}

這比設法使孩子的z-index比父母少得多。

小提琴：http://jsfiddle.net/filever10/TbJt3/

來源

2013-11-13 18:36:18 FiLeVeR10

@StevenWu這是否解決了你的問題？ – FiLeVeR10

CSS z-index沒有正確堆疊

回答

相關問題