Html 强制“位置：绝对”相对于文档而不是父容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6867244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force "position: absolute" to be relative to the document and not the parent container
提问by Timothy Ruhle
I am trying to insert a div into any part of the body and make its position: absoluterelative to the whole document and not a parent element which has a position: relative.
我试图将一个 div 插入正文的任何部分，并使其position: absolute相对于整个文档，而不是具有position: relative.
采纳答案by tw16
You will have to place the divoutside of the position:relativeelement and into body.
您必须div将position:relative元素的外部放入body.
回答by Adrian Holovaty
You're looking for position: fixed.
您正在寻找position: fixed.
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page.
固定定位类似于绝对定位，不同之处在于元素的包含块是视口。这通常用于创建一个浮动元素，即使在滚动页面后仍保持在同一位置。
回答by liorq
My solution was to use jQuery for moving the div outside its parent:
我的解决方案是使用 jQuery 将 div 移动到其父级之外：
<script>
jQuery(document).ready(function(){
jQuery('#loadingouter').appendTo("body");
});
</script>
<div id="loadingouter"></div>
回答by Michael.Lumley
If you don't want to attach the element to body, the following solution will work.
如果您不想将元素附加到body，则以下解决方案将起作用。
I came to this question looking for a solution that would work without attaching the div to the body, because I had a mouseover script that I wanted to run when the mouse was over both the new element and the element that spawned it. As long as you are willing to use jQuery, and inspired by @Liam William's answer:
我来到这个问题寻找一个解决方案，该解决方案可以在不将 div 附加到主体的情况下工作，因为我有一个鼠标悬停脚本，当鼠标悬停在新元素和生成它的元素上时，我想运行该脚本。只要您愿意使用 jQuery，并受到@Liam William 的回答的启发：
var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);
This solution works by subtracting the element's current left and top position (relative to the body) so as to move the element to 0, 0. Placing the element wherever you want relative to the body is then as simple as adding a left and top offset value.
此解决方案的工作原理是减去元素的当前左侧和顶部位置（相对于主体），以便将元素移动到 0, 0。将元素放置在相对于主体的任何您想要的位置就像添加左侧和顶部偏移一样简单价值。
回答by Lime
This isn't possible with simply CSS and HTML.
这对于简单的 CSS 和 HTML 是不可能的。
Using Javascript/jQuery you could potentially get the elements jQuery.offset()to the DOM and compare it the jQuery.position()to calculate where it should appear on the page.
使用 Javascript/jQuery，您可以潜在地将元素获取jQuery.offset()到 DOM 并进行比较jQuery.position()以计算它应该出现在页面上的位置。
