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

Question

我知道什么是绝对位置和相对位置，但仍有一些疑惑。以下是参考信息：

CSS：

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

HTML：

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

现在的点数是：

• 相对定位的 div 元素会自动占满整个宽度，但绝对定位的 div 元素只占用内容的宽度。为什么？

• 当我给相对定位的 div 元素设置高度 100% 时，没有效果，但绝对定位的 div 元素会占用整个父元素的高度。为什么？

• 当我给一个元素设置 margin-top:30px 时，它会把绝对定位的 div 元素也顶下去，但如果我设置 top:30px ，那么只有相对定位的 div 元素会发生移动。为什么？

• 如果我不给绝对定位的 div 元素设置 top:0, left:0 ，它会占用上面的 div 元素的高度。为什么？

- sandeep

---

@BoltClock：请给我规范的链接。 - sandeep

这是一个很好的参考，用于解释不同类型的位置之间的区别：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ - Dan

Answer 1

1. 使用position:absolute会将相应元素从文档结构的正常流程中移除。因此，除非您明确设置宽度，否则该元素将不知道应该有多宽。如果您希望实现这种效果，可以显式地设置width:100%。

2. 具有position:relative的元素在整体上的行为方式与普通的position:static元素相同。因此，除非父元素有定义的高度，否则设置height:100%将没有任何效果。相比之下，绝对定位的元素从文档流中移除，因此可以自由调整到包含它们的元素当前具有的任何高度。

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

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

- warmanp

---

感谢你的回答。我喜欢第一和第四点，它们非常有用，但对于第三点，请在上面的代码中实现该值以获得更好的理解。 - sandeep

@sandeep，你上面的代码没有包括这两个div的父元素的任何信息。我需要知道父元素的样式才能完全回答你的问题。 - warmanp

但是，“position:absolute”不仍然相对于其父元素吗？w3schools.com说：“该元素相对于第一个定位（非静态）的祖先元素定位”。这实际上是什么意思？祖先元素是什么，并且它必须是绝对定位吗？如何找到元素的祖先元素？ - Agent Zebra

从第二点我理解到，一个具有 position: relative 的父元素需要有一定的高度，例如 95vh，否则具有 position: relative 的子元素将没有任何效果。我的理解正确吗？ - Keyur paralkar

@AgentZebra 祖先是指与当前元素在文档树上连接的所有元素，无论高度差多少级。 - A A