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>

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

这大致是你在找什么？让我们知道你的进展！

Answer 2

您需要对任何父DIV（包含图像）使用position: relative。覆盖DIV的任何图层必须嵌套在父级内，并且CSS属性设置为position: absolute。

这会将嵌套的DIV标记设置为位于其父级的左上角，并将其覆盖。那么z-index应该可以工作。

希望有所帮助。

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

Answer 3

请发布相关的HTML！

然而，块的内容似乎获得了z-indices，但由于“Stacking contexts”，这通常不起作用。请参阅Overlapping And ZIndex。

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

z-index分层问题

3 个答案: