Question

.main
{
    background-color:#669;
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    height:1000px;
}


.content
{
    background-color: #CCF;
    width:100%;
    height:1000px;
    margin-top:5%;
    position: absolute;
}

如果您看到主要类的宽度为1200px，并且我希望每个div都适合1200px。

我将内容类的宽度设置为100%，假设它将遇到1200px作为其最终限制。

但是，它没有发生。它实际上是从主类延伸并占据整个页面？

Answer 1

设置position: absolute;会将其从正常流程中取出，并且是元素宽度不受父项约束的方式之一。

Answer 2

您必须将position: relative添加到容器中，以限制absolute定位的子元素不超过它的大小。

绝对定位

相对定位的元素仍然被认为是在   文档中元素的正常流动。相反，一个元素   绝对定位的是从流程中取出并因此占用   放置其他元素时没有空间。绝对定位   元素相对于最近定位的祖先定位。如果一个   定位的祖先不存在，使用初始容器。

＆＃13;

.main
{
    background-color:#669;
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    height:1000px;
    position: relative;
}


.content
{
    background-color: #CCF;
    width:100%;
    height:1000px;
    margin-top:5%;
    position: absolute;
}

＆＃13;

<div class="main"><div class="content"></div></div>

＆＃13;

参考：MDN - Absolute positioning

Answer 3

那是因为定位是绝对的，所以容器不在页面流中而且不再受其父元素的影响。

Answer 4

 position: absolute;

这意味着无论你的.content类元素不依赖于其他div。尝试将此转换为亲戚或其他东西。这应该有用。

为什么内部容器不适合外部容器？

4 个答案: