可以绕过那个最近的祖先？

Question

“绝对定位的元素相对于最近的定位祖先定位。” - MDN: position - CSS

当父母被定义为position:relative;时，我理解这一点，但我没有意识到position:absolute在技术上有资格作为“定位祖先”。

以下是一个示例：http://jsfiddle.net/MSzZG/如果文本“顶部”可以将top属性应用于窗口而不是包含div，那将会很好，但我不能弄清楚是否有可能绕过。

<div>
 <div>Content
 </div>
</div>
<div style="position:absolute;">
 <div style="position:absolute;top:0px;">At top
 </div>
</div>

有没有办法绕过先前定位的绝对元素（没有使用固定）？一个javascript解决方案是可以接受的。

Answer 1

答案

没有。你不能这样做。

推理

如果你能够做到这一点，那么你可以将一个div完全远离父母。这不仅会使父母“孤独”，而且还会完全挫败筑巢的目的。嵌套div标签或任何标签不仅仅是为了美容目的;这样做是为了向用户传达 textual 含义。

我建议您重新考虑一下你的方法吗？也许如果你解释一下你想要的最终结果，我们可以帮助你。肯定有一个解决方案。

可能的解决方案

• 如果您需要将内部div放在顶部，则将其取出一层。
• 从父级移除绝对定位。
• 使用另一种绝对定位方法。

Answer 2

您必须计算其自然位置与所需位置之间的差异，以将其绝对放在窗口中。

如果你正在使用jQuery，你可以通过.offset(coordinates)函数让它为你做数学。

Answer 3

如果您希望内部position: absolute div相对于窗口（您应该指定position: relative）定位，则不需要嵌套它。

position: absolute始终相对于其最终IMMEDIATE定位父级（position: absolute或position: relative）。你不能绕过这个 - 你只需要更好地构建你的HTML或以不同的方式实现CSS。

所以基本上你的问题的答案是否定的:(至少没有使用你明确提到不想做的固定定位。