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

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也是当我给出顶部: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.