z-index 值无法正常工作 - z-index 50 项目显示在下方答案

【问题标题】：z-index values not working the way it should - z-index 50 item shows up underneathz-index 值无法正常工作 - z-index 50 项目显示在下方
【发布时间】：2010-11-04 21:57:42
【问题描述】：

http://new.michaellane.com/listing-gallery.php

你在那里看到的黄色纸条有这样一套：

.listing_specs {
    width:230px;
    height:140px;
    background-image:url('/images/featured_listing_specs.png');
    background-repeat:no-repeat;
    color:#836637;
    padding-top:10px;
    position:absolute;
    top:120px;
    right:-120px;
    z-index:50;
}

包含它的 div .listing_icons 只是一个通用的 float:left, position:relative DIV，z-index 仅为 10。

黄色条出现在右侧的 .listing_icons 下方是怎么回事？

【问题讨论】：

标签： html css position z-index layer

【解决方案1】：

将左侧所有grid_8 alpha listing_gallery_icon中的z-index设置为11。

【讨论】：

【解决方案2】：

只需从 .listing_gallery_icon 中删除 z-index：

.listing_gallery_icon {
  position:relative;
  /*z-index:10;*/
}

【讨论】：

工作就像一个魅力.. 至少到目前为止在 Firefox 上。这个逻辑是怎么工作的？？
你用的是什么版本的IE？（逻辑是您正在为每个“列表图库图标”创建一个新的堆叠上下文。图标内的任何内容都将与该堆叠上下文相关，因此所有图标都是“10”，所有“列表规范”都是“10.50”不只是 50。因为它们都处于相同的高度，所以会按照它们在源中出现的顺序堆叠它们。）
是的，我现在明白了.. 只是，稍后在代码中创建的 div 仍然位于之前的 TOP 上，因此需要明确的 z 索引。我接受了另一个答案——关于在 z-index 10 和 11 之间交替，这对我来说很有效。我现在更好地理解了这个问题，非常感谢.. 我希望我可以分割积分。
给他们所有的 z-index 10 没有任何作用，它只是回到按顺序解决它们。交替 11/10 做你想要的，但仍然完全没有必要。（我怀疑 IE 中的问题是它错误地创建了一个新的堆叠上下文，因为您指定了“位置：相对”。我的下一个建议也是删除它）这是一篇非常好的文章，解释了 z-indices，它还列出了您在 IE7 中遇到的错误：smashingmagazine.com/2009/09/15/…

【解决方案3】：

这是因为右侧的 div 与左侧的注释无关。

尝试设置右边：-120px；到 0。这是想要的效果吗？

【讨论】：

不，我希望它们只在鼠标悬停时飞出......所以通常你不会看到整个东西。定位是正确的。只是层是个问题。