强制"position:absolute"相对于文档而不是父容器

Question

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

Answer 1

你在找position: fixed.

来自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()以计算该元素在页面上的显示位置。