Question

在此处有一个网站：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;
}

如果我将位置从相对位置更改为静态，则会显示背景，但会在页面顶部显示徽标覆盖图。该顶级徽标的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问题？提前谢谢。

Answer 1

将z-index从固定文本的大概念中删除。

.floating-logo{
   //just leave z index out of here
}

.floating-logo img{
   //here as well
}

使用Chrome开发人员工具，看起来它会使您想要显示的图像显示出来，并且最大的想法文本在顶部保持可见。

Answer 2

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）

元素position:static;

将忽略

z-index

CSS修复了背景z-index问题

2 个答案: