我不擅长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>
最佳答案
我认为你很接近。但为简单起见,我只是将 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;
}
这大概就是您要找的东西吗?让我们知道您的进展情况!
关于css - z-index 分层问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7047593/