Question

我以为自己已经掌握了CSS并最终征服了定位！好吧，直到我在ipad上本地测试我的网站！

使用下面的例子我只想让背景变黑（没问题）。在黑色背景上，我希望绿色的“内容 - 背景”在黑色背景上方从左到右（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>

Answer 1

我拿起你的小提琴并稍微摆弄它以获得你所提到的预期效果。

这里没有修改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不再是绝对的＆＃34;定位顶部，左侧，底部和右侧属性将不起作用。而是使用边距来移动东西。

至于边界DIV - 因为它位于（内容 - 背景）Div之后 - 将其置于相对位置将把它放在（内容 - 背景）DIV之后 - 通过将此Div指定为＆＃34;绝对＆＃34;只要设置了top，left，bottom和right属性，就可以将它放在屏幕上的任何位置。

我希望这有助于指导您为未来的css使用找到正确的方向，因为有大约一百万种方法可以编写这个示例:)

CSS定位未按预期显示

1 个答案: