Force "position: absolute" to be relative to the document and not the parent container

我试图将一个 div 插入到主体的任何部分，使它的 position: absolute相对于整个文档，而不是具有 position: relative的父元素。

99423 次浏览
小开
最佳答案

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

小开

仅仅使用 CSS 和 HTML 是不可能做到这一点的。

使用 Javascript/jQuery，您可以将元素 jQuery.offset()与 DOM 进行比较，然后将其与 jQuery.position()进行比较，以计算它应该出现在页面的哪个位置。

小开

我的解决方案是使用 jQuery 将 div 移到其父节点之外:

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


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

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

我来到这个问题，寻找一个不需要将 div 附加到 body 的解决方案，因为我有一个 mouseover 脚本，当鼠标在新元素和生成新元素的元素上时，我想运行它。只要你愿意使用 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。将元素相对于主体放置在您想要的任何位置，只需添加一个左偏移量和顶偏移量值即可。

小开

你在找 position: fixed。

来自 MDN :

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

注意 没用的当..。

(...)其祖先之一具有 transform、 perspective或 filter属性，该属性设置为 none以外的其他属性。


提交答案