CSS 固定背景 z-index 问题

标签 css position background-image z-index

在这里找到一个站点: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/

相关文章:

javascript - 调整大小时如何包装然后展开div?

css - CSS 动态 Div 标签调整为静态 Div 标签的问题

html - 即使父元素是固定的,如何获得不固定的子元素的位置?

html - 如何定位溢出 div 边缘(右下角)的图像?

css - 从父元素覆盖/删除背景图像

CSS3 背景图像过渡

html - 在导航菜单上居中页面链接

jquery - css:边框填充 div

python - 为什么我的自定义 QGraphicsItem 没有显示在预期的坐标上?

css - 多个背景色图层