检索到的 $(）.position(） 更新为 position: absolute 后发生了变化

Retrieved $().position() changes after updating to position: absolute

本文关键字：position absolute 发生了 变化 检索 更新      更新时间：2023-09-26

我正在为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"属性会影响旧属性。有谁知道原因和可能的解决方案？

当您设置<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。

更新的小提琴

相关文章：