绝对与相对位置的宽度和高度

Question

我知道什么是绝对位置和相对位置，但是我仍然不清楚一些要点。以供参考

CSS：

.rel{
    position:relative;
    background:red;
} 
.abs{
    position:absolute;
    background:blue;
}

的HTML：

<div class="rel">rel</div>
<div class="abs">abs</div>

现在的要点是：

• 相对div自动采用100％宽度，但绝对div仅采用内容宽度。为什么？

• 当我给高度100％时，相对div无效，但绝对div的高度为100％。为什么？

• 当我给margin-top：30px时，它也偏移绝对div，但是当我给top：30px时，则只有相对div偏移。为什么？

• 当我不给top:0 , left:0绝对div时，它需要高于div高度。为什么？

Answer 1

1. 设置position:absolute会从文档结构的正常流程中删除有问题的元素。因此，除非您明确设置宽度，否则它将不知道会有多宽。您可以明确设置width:100%是否要这样做。

2. position:relative总体上具有的元素的行为与普通position:static元素的行为相同。因此，height:100%除非父元素具有定义的高度，否则设置将无效。相反，绝对定位的元素从文档流中删除，因此可以自由调整到其包含元素当前具有的任何高度。

3. 这可能与HTML中的父元素有关，但是除非您提供页面的完整HTML和CSS，否则我将无济于事。

4. top和left属性的默认值为auto。这意味着浏览器将为您计算这些设置，并将它们设置为元素不存在时将呈现的位置position:absolute。