javascript - 绝对定位 block 反对文档中的任何元素

Question

示例代码:http://jsfiddle.net/ZAm2A/3/

目标是针对(相对于)具有不同 html 结构的任何页面上的任何 dom 元素定位某些弹出窗口(div.absolute-block)。为了能够绝对定位弹出窗口，我们需要将它嵌入到那个 dom 元素中，之前用相对或绝对定位的 block (div.relative1 在我们的示例中)包装了 div.absolute-block。
问题在于，如果我们在其中嵌入弹出窗口的 dom 元素在其祖先中包含 overfillw: hidden (div.overflow1) block ，则 div.overflow1 可能会裁剪弹出窗口。 div.overflow1 可能相对定位，在我们的情况下我们无法影响它。

第二种方法是将弹出窗口附加到页面主体。在这种情况下，我们面临着将弹出窗口相对于某个 dom 元素定位的问题。我们可以计算并设置文档就绪事件弹出窗口的顶部和左侧属性。但是在窗口大小调整、ajax 内容更改或任何事件更改跟踪元素位置的情况下，我们必须重新计算弹出位置。

我想是否有一些新的 html 5 功能可以让我定位弹出窗口而不将其嵌入到 dom 元素中，我想相对于定位弹出窗口？任何其他想法表示赞赏。

Answer 1

没有办法让子元素转义 overflow 设置为 hidden 的父元素。如果你想让一个元素恰好位于页面上某个元素的顶部，最安全的选择是将它放在文档的根部，使用 Javascript 计算和调整位置，并在窗口调整大小时更新等. 您可能对使用 jQuery 的 position() 感兴趣(相对于 parent )或 offset() (相对于整个文档)帮助计算的方法。

另外，这里有一个关于 overflow: hidden 问题的相关问题可能会有所帮助:Make child visible outside an overflow:hidden parent