在这里找到一个站点:http://www.bigideaadv.com/big_idea_v2/#blog
我遇到的问题是博客有一个高度为 340 像素的 div 和一个固定的背景附件。
.full-fixed-background {
position: relative;
width: 100%;
height: 340px;
background: url("images/blog_slide.jpg") 0 0 repeat fixed;
background-attachment: fixed;
background-size: 100% auto;
z-index: 3000;
}
如果我将位置从相对位置更改为静态位置,则会显示背景,但会显示页面顶部的 Logo 叠加层。该顶部 Logo 的 css 如下:
.floating-logo {
display: block;
position: absolute;
top: 50%;
height: auto;
text-align: center;
z-index: 2500;
margin-top: -94px;
margin-left: -356.5px;
left: 50%;
width: 715px;
}
.floating-logo img {
display: block;
position: fixed;
margin: 0 auto 0 auto;
width: 715px;
height: auto;
z-index: 2500;
}
任何人都可以提供帮助解决 z-index 问题吗?提前致谢。
最佳答案
去掉大创意固定文本的 z-index。
.floating-logo{
//just leave z index out of here
}
.floating-logo img{
//here as well
}
在 chrome 开发者工具中尝试,它看起来像是让你想要显示的图像然后在顶部保持可见的大创意文本。
关于CSS 固定背景 z-index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19866982/