Css 绝对与相对位置宽度&；高度

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

css:

html:

rel
防抱死制动系统

现在的要点是：

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

• 当我给出100%高度时，相对div没有影响，但绝对div取100%高度。为什么?

• 当我给出余量top:30px时，它也是移位绝对div，但当我给出top:30px时，它只是相对div移位。为什么?

• 当我没有将

  top:0，left:0

  赋给绝对div时，它会取高于div高度的值。为什么?

设置

position:absolute

会从文档结构的正常流程中删除有问题的元素。因此，除非明确设置宽度，否则它不知道宽度。您可以显式设置

width:100%

，如果这是您想要的效果

具有

position:relative

的元素总体上的行为方式与正常

position:static

元素的行为方式相同。因此，除非父元素具有定义的高度，否则设置

height:100%

将无效。相反，绝对定位元素从文档流中移除，因此可以自由调整其包含元素当前的高度

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

“顶部”和“左侧”属性的默认值为“自动”。这意味着浏览器将为您计算这些设置，并将它们设置为元素在没有

位置：绝对
时渲染的位置

---

@BoltClock：请给我规范的链接这里有一个很好的参考来解释不同类型的职位：谢谢你的回答。我喜欢第1点和第4点，这非常有用，但对于第3点，请实现上述代码中的值以获得更好的效果understanding@sandeep,上面的代码不包含关于这两个div的父元素的任何信息。我需要知道父元素的样式如何才能完整地回答您的问题。但是，

position:absolute

是否仍然相对于它的父元素？表示“元素相对于其第一个定位（非静态）的祖先元素进行定位”。这到底是什么意思？什么是祖先元素，它必须是绝对定位的吗？如何找到元素祖先元素？从第2点我了解到，具有

position:relative

的父元素必须具有一定的高度，例如

95vh

或具有

position:relative

的子元素没有任何效果。我的理解正确吗？

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

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