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

93

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

html css css-position

— 蒂莫西·鲁尔（Timothy Ruhle）
source

如果它相对于文档的位置是绝对的，那么它就属于<body>标签的子元素，不是吗？

— Jim Garrison

您在下面看到我的解决方案了吗？

— 2011年

是的我正在创建一个用于很多页面的模板，有时在一个相对定位的元素（我无法控制）中使用该模板。我现在看到这是不可能的。谢谢您的帮助。我+1，我将其标记为如果你在你的答案说，它不可能纠正。

— 蒂莫西Ruhle

BrainJar对CSS定位有一个非常经典的介绍，它将清除这里所有仍然存在的问题。

— 艾伦·H。

36

您将必须div将position:relative元素的外部放入body。

— tw16
source

1

^^这个。如果绝对定位，则没有任何理由将其放置在相对定位的元素内。

— DOOManiac 2011年

7

@DOOManiac-您可能希望将其放在相对定位的元素内，因为您希望它运行鼠标悬停脚本或不运行由父级触发的鼠标悬停脚本。我的回答允许出现这种情况。

— Michael.Lumley 2014年

1

@DOOManiac将绝对元素放入相对元素的原因是相对于相对元素放置绝对div。如果要相对于实体定位，则默认情况下，实体是相对的，即使它不是那样设置的。

— 杰森·福利亚

18

出于多种原因，您需要使该容器成为另一个容器的子容器，但是该位置对于文档而言应是绝对的。像直接将其包含到身体之类的答案是错误的。正确答案是位置：固定。不赞成投票。

— 2015年

3

@walv：position:fixed并且position:absolute没有相同的行为。已修复，它是相对于视口（而不是文档）的，即使滚动后也可能会导致该项目始终可见，从而可能导致重叠等。 CSS，我的回答是正确的。没有JS使其相对于文档相对的唯一方法是将其移出position:relative元素。

— tw16

95

您正在寻找position: fixed。

从MDN：

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

— 阿德里安·霍洛瓦蒂（Adrian Holovaty）
source

28

这个答案的问题是用户想要使用绝对值，因为固定元素不会在滚动上移动，而绝对值元素会::

— 一位朋友

3

你是绝对的传奇。

— 贝尼斯堡人队'19

6

问题是如何相对于文档而不是视口定位

— Paul Humphreys，

这可能会导致问题的IE11，因为堆叠内容中的错误

— 詹姆斯梅龙镇

32

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

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

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

— or
source

1

这解决了我的问题，因为因为使用母版页，所以无法将元素直接放置在body元素内。谢谢！

— 鱼鹰

9

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

— 迈克尔·鲁姆利
source

2

还值得一提的是jQueryUI位置函数。

— Michael.Lumley 2014年

8

仅使用CSS和HTML是不可能的。

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

— 酸橙
source

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

— BornToCode