CSS定位不像预期的那样显示

我以为我得到了CSS的终结，终于征服了定位！好吧，直到我在我的ipad本地测试我的网站！CSS定位不像预期的那样显示

使用下面的例子我只是想让背景变黑（没有问题）。在黑色背景之上，我想让绿色的“内容背景”从黑色背景上方的左至右（100％）穿过整个屏幕。在绿色的“内容背景”之上，我想要主容器div。我不知道为什么，但我的例子不工作？这应该是一件简单的事情呢？当浏览器从右向左收缩，然后滚动水平滚动条移动到右侧时，问题很明显。当发生这种情况时，您会看到绿色的“内容背景”不会在整个屏幕上垂直扩展？

任何帮助是极大的赞赏：）

小提琴：http://jsfiddle.net/Margate/Sk5X9/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 

<head> 
<title>Positioning</title> 

<style type="text/css">  
#page-background{background-color:black; } 
#content-background{position:absolute; top: 100px; width: 100%; height: 616px; background-color: green;} 
#main-container{position: relative; top: 0px; width: 1000px; height: 910px; margin: 0px auto; border: 1px solid red;} 
</style> 
</head> 

<body id="page-background"> 

<div id="content-background"></div> 
<div id="main-container"> 

</div> 
</body> 
</html>

来源

2013-06-19 Margate

你的代码是不完整的一百万的方式。 proballay复制/粘贴监督 – Jawad

你好Jawad，我刚刚检查了代码，一切都正确？如果你去小提琴你可能会得到一个更好的主意。该页面是完全基本的，但确实显示了问题。它故意没有内容，因为没有必要包含所有内容....我认为在定位时存在一个问题，但我不知道为什么？感谢您的任何帮助。：） – Margate

没错。我的错。现在看它 – Jawad

我把你的小提琴，用它拨弄一点点地得到你所提到的预期效果。

没有在这里修改HTML是新的CSS

#page-background { 
    background-color:black; 
    width: 100%; 
} 
#content-background { 

    margin-top: 100px; 
    width: 100%; 
    height: 616px; 
    background-color: green; 
} 
#main-container { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    height: 910px; 
    margin: 0px auto; 
    border: 1px solid red; 
}

我发现指定的车身宽度为100％，给孩子的div适当参照屏幕尺寸，并允许孩子DIV（内容背景）跨越屏幕的长度。

**因为DIV不再是“绝对”的位置，顶部，左侧，底部和右侧属性将什么也不做。而是使用利润率来移动东西。因为它在（content-background）div之后 - 把它放在相对定位中会把它放在（content-background）DIV之后 - 通过指定这个Div为“绝对”您可以将它放置在屏幕的任何位置，只要您设置顶部，左侧，底部和右侧属性即可。

我希望这有助于引导您在未来的CSS使用正确的方向有关于这个例子可以写成:)

来源

2013-06-19 21:58:38

忽略相对评论该元素相对于其正常位置的位置，所以“左：20”将20个像素添加到元素的左侧位置，而不是左侧设置为20 –

Hi Dave，非常感谢您的时间和帮助。对我很有帮助。我将回到CSS定位绘图板！我认为我已经破解了，但现在意识到我只是了解非常基础（我认为！）。定位是最基本的，我觉得掌握起来很困惑！马盖特... – Margate

很高兴我能帮忙！我一直在与定位怪物争斗一个好年，现在我可以给出的建议是保持它，并最终它会全部点击：D –

CSS定位不像预期的那样显示

回答

相关问题