Question

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

Answer 1

您正在寻找position: fixed。

From MDN：

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

Answer 2

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

Answer 3

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

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

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

Answer 4

如果您不想将该元素附加到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。然后将元素相对于正文放置在任意位置就像添加左侧一样简单和顶部偏移值。

Answer 5

仅使用CSS和HTML无法做到这一点。

使用Javascript / jQuery，您可以将元素jQuery.offset()添加到DOM，并将其与jQuery.position()进行比较，以计算它应该在页面上显示的位置。

强制“position：absolute”相对于文档而不是父容器

5 个答案: