z-index 分层问题
我的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>
I am terrible at css, please bear with me.
Three elements: .subscribe
, #pictures
, #menu
.
These three need both .subscribe
and #menu
to be overlay on top of pictures. The css is below (all selectors are correct). I thought just z-index
and positioning would do it, however, it's not working out.
Anything obviously wrong? Thank you.
#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');
}
Mark-up:
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我想你已经很接近了。但为了简单起见,我只是将 z-index 放在稍微不同的元素上(即主容器元素)。
尝试一下这里的代码: http://jsfiddle.net/irama/GwcsF/1/
关键是:
这就是您想要的吗?让我们知道你进展如何!
I think you're close. But to keep it simple, I would just put the z-index on slightly different elements (namely the main container elements).
Have a play with the code here: http://jsfiddle.net/irama/GwcsF/1/
The key bits being:
Is that roughly what you were looking for? Let us know how you go!
您需要对任何父 DIV(其中包含图像)使用
position:relative
。任何覆盖该 DIV 的图层都必须嵌套在父级中,并且 CSS 属性设置为position:absolute
。这会将嵌套的 DIV 标签设置为位于其父级的左上角,并覆盖它。那么 z-index 应该可以工作。
希望有帮助。
参考: http://css-tricks.com/3118-text-blocks-图像过度/
You need to use
position: relative
for any parent DIV (with the image in it). Any layers to overlay that DIV must be nested inside the parent and with the CSS attribute set toposition: absolute
.This sets the nested DIV tag to sit at the top left of it's parent, and overlay it. Then the z-index should work.
Hope that helps.
Ref: http://css-tricks.com/3118-text-blocks-over-image/
请发布相关的 HTML!
然而,块的内容似乎正在获取z索引,但这通常不会起作用,因为“堆叠上下文”。请参阅重叠和 ZIndex。
因此,根据 HTML,您可能需要在
#pictures
和#menu
容器上设置z-index
。Post the related HTML, please!
However, the contents of blocks appear to be getting the z-indices, but this will often not work because of the "Stacking contexts". See Overlapping And ZIndex.
So, depending on the HTML, you'll probably need to set
z-index
on the#pictures
and#menu
containers.