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没有正确堆叠

回答

相关问题