绝对与相对位置宽度＆amp;高度

Question

我知道什么是绝对的＆amp;相对位置，但有些点仍然没有清除给我。 供参考

的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. 顶部和左侧属性的默认值为auto。这意味着浏览器将为您计算这些设置，并将它们设置为元素在没有position:absolute的情况下呈现的位置。