html - 位置 : absolute;

Question

/codepen 链接曾经在这里/

当我没有给我的主页脚指定位置时，段落元素与根元素无关。为什么它与我的 .banner 元素有关？这不是它的祖先。这是一个错误吗？

.main-footer {
 /*position: relative;
}*/

.main-footer p {
 position: absolute;
 bottom: 1px;
}

"Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block), which the containing block of the document's root element." - https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 1

在你的 codepen 中，移除 .main-footer 上的定位后，.main-footer p 是相对于 body 的是最近的根祖先。它可能看起来与 .banner 相关，因为它们在同一个地方结束，但如果您完全删除多余的元素，您可以非常清楚地看到它。

https://codepen.io/anon/pen/WPOjOZ

在 Chrome 中测试