如何使用Jquery设置DIV的绝对位置？

Question

我有这样的一段代码：

$('#lol').css({ position: "absolute",

        marginLeft: 0, marginTop: 0,

        top: 0, left: 0});

问题在于我的div是相对定位的，因此它是一个div的0点而不是整个窗口。为什么会这样？

- Vonder

---

为什么是什么？为什么你的div相对定位？或者为什么绝对定位会以这种方式工作？ - BonyT

语言的目的是以清晰明确的方式进行沟通，不应包含猜测。 - BonyT

Answer 1

正如其他答案所指出的那样，#lol 的至少一个父元素设置了 position 属性，这会导致你的元素在父元素中定位。

使用 jQuery 的解决方案是将该元素直接附加到 body。

$('#lol').css({ 
    position: "absolute",
    marginLeft: 0, marginTop: 0,
    top: 0, left: 0
}).appendTo('body');

这将使其出现在窗口的左上角。

- DanielB

---

appendTo，但其他方面都很棒！ - Vonder

它完美地运行了！但是滚动怎么办？我们如何在滚动事件上运行代码？我尝试过类似这样的东西：$(window).scroll(function(){ /code here/}); 但似乎不起作用。有什么想法吗？ - Piotr Czyż

Answer 2

为什么呢？

如果你想使用 position: absolute 相对于整个窗口，你需要确保你的 #lol 没有父元素也设置了 absolute、fixed 或者 relative 的定位属性。

否则，你指定的任何定位都会相对于它们进行。

- Pekka

Answer 3

具有 position: relative 或 position: absolute 属性的元素将相对于最近的具有 position: relative 或 position: absolute 属性的父元素进行定位。因此，如果您希望元素相对于整个窗口进行定位，请将其放置在没有具有相对或绝对位置的任何父包装器之外。

- Wex

---

如果子元素具有position: absolute，则其子元素将在相对父元素内绝对定位。 - mikeq

Answer 4

这就是定位的工作原理。如果您有任何指定了位置的父元素，绝对定位将相对于它们发生。

如果您希望它相对于窗口定位，但又不能取消其他元素的定位，您需要手动或使用一些JS将该项从常规页面流中移除。

- user801985

Answer 5

如果您想在元素上使用 absolute:position 相对于整个窗口屏幕，那么该元素的任何父元素都不应给定任何位置值，如 absolute、fixed 或 relative，因为如果给定任何位置属性，则该元素将相对于其父元素定位。 希望这回答得很好... :)

- chandanjha