强制“位置：绝对”相对于文档而不是父容器答案

【问题标题】：Force "position: absolute" to be relative to the document and not the parent container强制“位置：绝对”相对于文档而不是父容器
【发布时间】：2011-10-15 14:02:32
【问题描述】：

我正在尝试将 div 插入正文的任何部分，并使其 position: absolute 相对于整个文档，而不是具有 position: relative 的父元素。

【问题讨论】：

如果它的位置相对于文档是绝对的，那么它属于<body>标签的子标签，不是吗？
你在下面看到我的解决方案了吗？
是的。我正在创建一个在很多页面中使用的模板，有时它在一个相对定位的元素内（我无法控制。我现在看到这是不可能的。谢谢你的帮助。来自我的 +1，我会将其标记为如果您在回答中说这是不可能的，请正确。
BrainJar has a totally classic introduction to positioning in CSS 将在这里解决所有挥之不去的问题。

标签： html css css-position

【解决方案1】：

您正在寻找position: fixed。

From MDN:

固定定位类似于绝对定位，不同之处在于元素的包含块是视口。这通常用于创建一个浮动元素，即使在滚动页面后也保持在相同的位置。

通知it doesn't work 当...

(...) 它的一个祖先的transform、perspective 或filter 属性设置为none 以外的其他值。

【讨论】：

这个答案的问题是用户想使用绝对，因为固定元素不会在滚动时移动，而绝对元素会:)
你是一个绝对的传奇。
问题是如何相对于文档而不是视口定位
这可能会导致 ie11 出现问题，因为堆栈上下文存在错误

【解决方案2】：

如果您不想将元素附加到body，以下解决方案将起作用。

我来这个问题是为了寻找一种无需将 div 附加到正文即可工作的解决方案，因为我有一个鼠标悬停脚本，当鼠标悬停在新元素和生成它的元素上时，我想运行该脚本。只要您愿意使用 jQuery，并受到@Liam William 的回答的启发：

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

此解决方案的工作原理是减去元素的当前左侧和顶部位置（相对于主体），以便将元素移动到 0、0。将元素放置在相对于主体的任何位置就像添加左侧一样简单和顶部偏移值。

【讨论】：

另外值得一提的是jQueryUI position函数。

【解决方案3】：

我的解决方案是使用 jQuery 将 div 移到其父级之外：

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>

【讨论】：

这解决了我的问题，因为我使用母版页无法将元素直接放在正文元素中。谢谢！

【解决方案4】：

这对于简单的 CSS 和 HTML 是不可能的。

使用 Javascript/jQuery，您可能会将元素 jQuery.offset() 获取到 DOM，并将其与 jQuery.position() 进行比较，以计算它应该出现在页面上的位置。

【讨论】：

恕我直言，这个答案是最有帮助的 - 不直接在身体下方移动元素（这并不总是可能）并且不使用固定位置，这将使元素即使在向下滚动时也总是出现我们只能求助于JS。 jQuery.offset({ left: 0 }) 为胜利而战！

【解决方案5】：

您必须将div 放在position:relative 元素之外并放入body。

【讨论】：

^^ 这个。如果它是绝对定位的，那么无论如何都没有理由将它放在相对定位的元素中。
@DOOManiac - 您可能希望它在相对定位的元素中，因为您希望它运行鼠标悬停脚本，或者不运行由父级触发的鼠标移出脚本。我的回答允许这种情况。
@DOOManiac 将绝对元素放入相对元素的原因是相对于相对元素定位绝对 div。如果你想相对于身体定位，身体默认是相对的，即使它没有这样设置。
您需要将容器作为另一个容器的子容器的原因可能有数百个，但位置应该是文档的绝对位置。像直接将其包含在正文中的答案是错误的。正确答案是位置：固定。投反对票。
@walv: position:fixed 和 position:absolute 没有相同的行为。固定是相对于视口（而不是文档），即使在滚动可能导致重叠等之后，也会导致项目始终可见。我知道 html 结构可能有正当理由，但问题是专门关于 html 和css，我的答案是正确的。没有 JS 使其相对于文档的唯一方法是将其移出 position:relative 元素。