【问题标题】：Possible to bypass then nearest positioned ancestor?可以绕过当时最近定位的祖先吗？
【发布时间】：2013-06-10 09:59:08
【问题描述】：

“绝对定位的元素是相对于最近定位的祖先定位的。” -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 解决方案。

【问题讨论】：

你试过fixed吗？这将始终引用窗口...
@PeterVR - 我意识到了这一点，但是当窗口滚动时固定保持在原位，这可能会导致问题。
您可以使用float。示例：jsfiddle.net/MSzZG/1
@DavidStarkey - 还不错，但 float 只是从页面流中删除了前一个元素，这就是为什么它看起来像是在应用顶部，但实际上并非如此。 jsfiddle.net/MSzZG/2

【解决方案1】：

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

position: absolute 将始终相对于其最直接定位的父级定位（使用position: absolute 或position: relative）。你无法绕过这一点——你只需要更好地构建 HTML 或以不同的方式实现 CSS。

所以基本上你的问题的答案是否定的 :( 至少在不使用你特别提到不想做的固定定位的情况下。

【讨论】：

【解决方案2】：

回答

没有。你不能那样做。

推理

如果您能够做到这一点，那么您可以将一个 div 放置在完全远离父级的位置。这不仅会使父母“孤独”，而且完全违背了嵌套的目的。嵌套 div 标签或任何标签不仅仅是为了美观；这样做是为了向用户传达文本含义。

我可以建议重新考虑您的方法吗？也许如果您解释您希望最终结果成为什么，我们可以为您提供帮助。肯定有解决办法。

【讨论】：

【解决方案3】：

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

如果您使用的是 jQuery，则可以通过 .offset(coordinates) 函数让它为您计算。

【讨论】：