Css z指数分层问题

我的css很差，请容忍我

三个元素：

.subscribe

，

#图片

，

#菜单

这三个需要同时覆盖在图片上方的

.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>

/ul>

我想你很接近了。但为了简单起见，我只将z索引放在稍微不同的元素（即主容器元素）上

在这里玩一下代码：

关键位是：

#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;
}

---

这大概就是你想要的吗？让我们知道你的进展如何

您需要对任何父DIV使用

position:relative

（其中包含图像）。要覆盖该DIV的任何层都必须嵌套在父层中，并将CSS属性设置为

位置：绝对

这会将嵌套的DIV标记设置为位于其父对象的左上角，并覆盖它。那么z索引应该可以工作了

希望有帮助

---

参考：

请发布相关的HTML

然而，块的内容似乎得到了z索引，但由于“堆叠上下文”，这通常不起作用。看

---

因此，根据HTML，您可能需要在

#pictures

和

#menu

containers上设置

z-index

。

我认为这是

的意思。@Jared-正确，除非她想让我们和她一起脱衣服。@Sara-您也需要贴一些标记。元素并不是简单地在一个Z-索引中，对所有元素都是免费的。。。它们的嵌套方式（父->子关系）影响它们的位置。然而，由于#图片和#菜单似乎是兄弟菜单，我认为您只需要在它们上设置一个z索引。因为subscribe似乎是图片的子对象，所以无论如何它都应该位于基本对象之上。@Sara-这只是我个人的观点，但是CSS格式化的方式可能很难阅读和调试。我不知道这是否是您通常的做法，但我曾经了解到，一行中的所有内容都容易出错。（尽管CSS最小化了。）@Sara-还需要注意的是缺少一个
在CSS中。