小编典典

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

css

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

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高度。为什么?


阅读 436

收藏
2020-05-16

共1个答案

小编典典

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

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

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

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

2020-05-16