position:absolute 如何改变元素的覆盖属性？答案

【问题标题】：How does position:absolute change element's overlay properties?position:absolute 如何改变元素的覆盖属性？
【发布时间】：2016-10-26 22:30:55
【问题描述】：

在示例 here 中，我注意到如果您从第一个部分元素中删除 margin-left:200px，它会扩展其宽度以完全匹配容器，但它不会低于 nav 元素，它有position:absolute。相反，它被 nav 元素覆盖，好像它的 z-index 较低。这是为什么？这两个元素不都在文档流中吗？所以这意味着它们应该一个接一个地出现，section 元素出现在 nav 元素下（当我删除 position:absolute 时会发生这种情况）？为什么它们会相互重叠？

【问题讨论】：

考虑在问题本身中发布所有相关代码：stackoverflow.com/help/how-to-ask

标签： css

【解决方案1】：

这两个元素不是都在文档流中吗？

不！ position: absolute; 专门从流中删除元素。

如this answer 中所述，绝对定位使用current positioning context。 position: absolute; 的元素仍然受其父元素的影响，但它完全独立于其兄弟元素。

【讨论】：

当前定位上下文适用于元素的子元素，那么在上面的示例中如何锻炼呢？ nav 是绝对定位元素，它是容器的子元素，是相对定位的。该部分是导航的兄弟，是相对定位的。这意味着 nav 和 section 都只是相对定位容器的子级，这将它们都置于父级当前定位上下文中。它在哪里说明儿童如何受到影响？
虽然您是正确的，section 和 nav 共享一个笛卡尔定位上下文，但正如我所提到的，绝对定位不承认它的兄弟姐妹。正如earlier in the document 所述：“每个‘绝对’定位元素的布局都独立于其他元素”