更新到position: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仅在循环滚动后才设置为.

更新了小提琴