z-index图层问题

Question

我在css方面很差，请见谅。

三个元素：.subscribe、#pictures、#menu。

这三个元素需要同时将.subscribe和#menu覆盖在图片上。CSS如下（所有选择器都是正确的）。我原以为只用z-index和定位就可以解决，但是它并没有起作用。

有明显错误吗？谢谢。

#slideshow * {
  margin: 0;
  padding: 0;
}
#slideshow {
  position: relative;
  padding: 14px 0 15px;
  width: 926px;
  height: 335px; 
}
#slideshow #pictures { 
  background: url('images/bg.jpg');
  width: 926px;
  height: 335px;
  left: 0;
  overflow: hidden;
}
#slideshow #pictures li {
  display: block;
  position: absolute;
  top: 0;
  width: 926px;
  z-index: -1;
}
#slideshow #pictures li img {
  display: block;
  position: relative;
  bottom: 0;
}
#slideshow #menu {
  list-style-type: none;
  right: 0;
  padding-top: 290px;
  padding-right: 20px
  position:relative;
}
#slideshow #menu li {
  display: block;
  float: right;
  z-index: 3;
}
#slideshow #menu li a {
  display: block;
  font: 11px "Lucida Grande", "Verdana";
  text-decoration: none;
  padding: 7px 0 7px 28px;
  z-index: 3;
  color: #ccc;
  line-height: 14px;
  vertical-align: middle;
}
#slideshow #menu li a:hover {
  color: #fff;
}
#slideshow #menu li.current a {
  font: 15px "Georgia";
  color: #fff;
  padding: 5px 0 5px 28px;
  line-height: 18px;
}
#slideshow #pictures .subscribe {
  height: 91px;
  width: 252px;
  position: relative;
  margin-top: 100px;
  float: left;
  bottom: 0;
  z-index: 2;
  background: url('images/SubscribeButton.png');
}
#slideshow #pictures .subscribe:hover {
  background: url('images/SubscribeButton-Dark.png');
}

标记语言：

<div id="slideshow">    
      <ul id="pictures">
        <li style="visibility: hidden; zoom: 1; opacity: 0; "> <a class="subscribe"></a><img src="style/images/sample1.jpeg" alt="Slide 1" title="Sample 1" style="display: none; width:926px; height:335px "></li>
        <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/sample2.jpeg" alt="Buenos Aires" title="Buenos Aires" style="display: none; width:926px; height:335px "></li>
        <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/Slideshow-Image1.jpg" alt="Our design team creates the perfect collections of white shirts each season" title="Creation" style="display: none; width:926px; height:335px "></li>

      </ul>

      <ul id="menu">
        <li><a href="style/images/sample1.jpeg">three</a></li>
        <li><a href="style/images/sample2.jpeg">two</a></li>
        <li><a id="first" href="style/images/Slideshow-Image1.jpg">one</a></li>

      <li class="background" style="visibility: hidden; zoom: 1; opacity: 0; left: 0px; top: 188px; width: 166px; height: 28px; "><div class="inner"></div></li></ul>
    </div>

- Sara Chipps

---

在这个情境下，我认为应该是“请耐心等待”。 - Jared Farrish

@Jared - 正确，除非她希望我们和她一起脱衣服。 - John Green

@Sara - 你需要发布一些标记。元素不是简单的Z-index自由竞争...它们的嵌套方式（父->子关系）会影响它们的位置。然而，由于#pictures和#menu似乎是兄弟姐妹，我认为你只需要在这些上设置一个z-index。由于subscribe似乎是pictures的子元素，所以它应该在基本对象的顶部。 - John Green

@Sara - 这只是我的个人意见，但你的CSS格式化方式可能很难阅读和调试。我不知道这是否是你通常的做法，但我曾经学过一点，即一行上的所有内容容易出错。（除了CSS最小化之外。） - Jared Farrish

@John - 我觉得指出另一个选项不太合适。 :) - Jared Farrish

Answer 1

我想你接近了答案。但为了简单起见，我建议只在稍微不同的元素上（也就是主容器元素）放置z-index。

请在这里尝试代码：http://jsfiddle.net/irama/GwcsF/1/ 关键部分如下：

#slideshow {
    position: relative;
}

#slideshow #pictures {
    left: 0;
    z-index: 1;
    position: absolute;
}

#slideshow #menu {
    right: 0;
    position:relative;
    z-index: 3;
}

#slideshow #pictures .subscribe {
    position:absolute;
    bottom: 0;
    z-index: 2;
}

这大概是您想要的吗？请告诉我们您的进展情况！

- irama

Answer 2

你需要为包含图片的任何父级DIV使用position: relative。覆盖该DIV的任何图层必须嵌套在父级内，并将CSS属性设置为position: absolute。

这将使嵌套的DIV标签位于其父级的左上角，并覆盖它。然后z-index应该起作用。

希望这能帮到你。

参考：http://css-tricks.com/3118-text-blocks-over-image/

- Alex

Answer 3

请发布相关的HTML代码！

然而，块的内容似乎正在获取z-index值，但由于"层叠上下文"的原因，这通常不起作用。请参见重叠和ZIndex。

因此，根据HTML代码，您可能需要在#pictures和#menu容器上设置z-index。

- Brock Adams