CSS

Question

我有一个简单的页面，背景有2个图像，一个在左边，一个在右边。基本上是一个绝对定位的固定DIV（#Background），包含2个浮动DIV。

除了 DIV 之外，我还有多个 DIV 全部嵌套在container（#mainDIV）中。

奇怪的是，当我向下滚动时，身体背景与#Background DIV重叠。

有任何建议吗？

CSS

* { padding: 0; margin: 0; }

html,
body{
    min-height:100%;
    width:100%;
    z-index:-10;
}

#Background{
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index:1;
}

#Background_Left{
    float:left;
    width:50%;
    height:100%;
    background:url(images/background_left.jpg) fixed;
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

#Background_Right{
    float:right;
    width:50%;
    height:100%;
    background:url(images/background_right.jpg) fixed;
    background-repeat:no-repeat;
    background-position:right;
    background-size:contain;
}

#mainDIV{
    position:relative;
    margin: 0 auto;
    width:1000px;
    min-height:100%;
    z-index:10;
}

#BotoesContainer{
    position:relative;
    height:200px;
    background:url(images/banner.png);
    background-repeat:no-repeat;
}

#ConteudoContainer{
    position:relative;
    padding-bottom:70px;
}

HMTL

<body>
<div id="Background">
    <div id="Background_Left"></div>
    <div id="Background_Right"></div>
</div>
<div id="mainDIV">
  <div id="BotoesContainer"></div>
  <div id="ConteudoContainer">Put lots of text here to scroll down</div>
</div>
</body>

我删除了所有非esencial代码，您可以使用"scroll overlap" Demo here

查看当前页面

Answer 1

向下滚动时，你的div正在结束。你可以通过添加

来保持它们

position:fixed;

到#Background

Answer 2

我检查了您的网页并检查了我发现您需要在position:fixed;

中添加position:absolute;而不是#Background的元素

#Background{
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index:1;
}

身体背景重叠Div图象背景

CSS

HMTL

2 个答案: