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

我知道什么是绝对的和相对的位置,但有些点还没有清除给我。 以供参考

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%在相对股利没有影响,但绝对股利高达100%。 为什么?

  • 当我给margin-top:30px它也是绝对div的转移,但是当我给顶:30px然后只有相对的div转移。 为什么?

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

  1. 设置position:absolute将正在讨论的元素从文档结构的正常stream中移除。 所以除非你明确地设定宽度,否则不知道宽度有多大。 你可以明确地设置width:100%如果那是你以后的效果。

  2. 一个元素的position:relative对于整体position:relative ,其行为与正常position:static相同position:static元素。 因此,除非父元素具有定义的高度,否则设置height:100%将不起作用。 相比之下,绝对定位的元素从文档stream中被移除,因此可以自由地调整到其包含的元素当前具有的任何高度。

  3. 这可能与HTML中的父元素有关,但除非您提供完整的HTML和CSS页面,否则我无法进一步提供帮助。

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