更新到位置后检索的 $().position() 更改：绝对

Question

我正在为 HTML 元素的动态淡入淡出寻找可能的解决方案。我的问题的核心是 jQuery 的 .position() 的一种奇怪行为，并在检索旧位置后更新了 css“位置”属性。

我制作了一个 JSFiddle 来说明我的问题：http://jsfiddle.net/svenhanssen/DDYVs/

/*
This works. I'll get a position.top from 0 to 90
*/

$("p").each(function( p ) {
    var position = $(this).position();

    console.log(position.top);
});

/*
This doesn't work. I'll get a position.top of 0 for all elements. Why does the css set effects the position?
*/

$("p").each(function( p ) {
    var position = $(this).position();

    console.log(position.top);

    $(this).css({
        position: "absolute"
    });
});​

后来以某种方式更改 css“位置”属性会影响旧属性。有谁知道原因和可能的解决方案吗？

Answer 1

当您将<p> 设置为position: absolute 时，它将从文档流中取出，并且下一个非绝对<p> 向上移动以占用释放的空间。然后你会看到刚刚重新定位的<p> 元素，果然它的top 现在是0（因为在它之前没有流入元素可以将其向下推）。

这是一个可能的解决方案：

$("p").each(function( p ) {
    var position = $(this).position();

    console.log(position.top);
}).css({
    position: "absolute"
});​

请注意，现在所有<p> 元素都设置为position: absolute 仅在循环滚动之后。

Updated fiddle