Question

我需要在网站全球背景（@wrapper）上放置背景图片（#foreground）。问题是包装器的背景显示在前景的顶部，尽管包装器具有较低的z-index和前景。

HTML：

<body>
    <div id="wrapper">
        //website content here
    </div>
    <div id="foreground"></div>
</body>

CSS

#wrapper { 
    width:100%;
    background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center; 
    min-height:1650px; 
    overflow:hidden;
    z-index: -2;
}

#foreground {
    background: url(../img/foreground.png) repeat 90% 110%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
}

此致

Answer 1

如果没有指定位置，

z-index不起作用。

尝试：

#wrapper { 
    width:100%;
    background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center; 
    min-height:1650px; 
    overflow:hidden;
    z-index: -2;
    position: relative;
}

Answer 2

将z-indexes更改为正值：

#wrapper { 
    z-index: 1;
}

#foreground {
    z-index: 2;
}

适合我：http://jsfiddle.net/jaakkokarhu/4y37zkpu/

CSS |将div放在web背景之上

2 个答案: