0

在这里有一个网站: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 问题的情况下提供帮助吗?提前致谢。

4

2 回答 2

0

从大创意固定文本中删除 z-index。

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

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

在 chrome 开发人员工具中玩耍,它看起来像是让您想要显示的图像然后显示在顶部,并且大创意文本保持可见。

于 2013-11-08T19:37:39.870 回答
0

z-index 仅适用于定位元素(位置:绝对、位置:相对或位置:固定)

z-index 将在元素上被忽略position:static;

于 2013-11-08T19:38:17.577 回答