javascript - 更新到位置 : absolute 后检索到 $().position() 更改

Question

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

我制作了一个 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“position”属性会影响旧属性。有谁知道原因和可能的解决方案？

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