jQuery顶部和底部位置的奇怪行为

Question

我看到顶部和底部位置之间的奇怪差异。 我已经把在一起的四个简单的例子来证明这个问题：

jsFiddle

//example 1 
$('#box1').hover(function() { 
    var offset = $('#box1').offset(); 
    $("#containment-wrapper1").css({ 
     bottom: offset.top 
    }); 
}); 

//example 2 
$('#box2').hover(function() { 
    var x = $('#box2').css('top'); 
    $("#containment-wrapper2").css({ 
     bottom: x 
    }); 
}); 

//example 3 
$('#box3').hover(function() { 
    var x = $('#box3').css('top'); 
    $("#containment-wrapper3").css({ 
     top: x 
    }); 
}); 

//example 4 
$('#box4').hover(function() { 
    var offset = $('#box4').offset(); 
    $("#containment-wrapper4").css({ 
     top: offset.top 
    }); 
}); 

实例3和4，像预期，上边框线与底部边框。

示例1和2不示例。似乎有大约30px的差异。

这是一个错误还是我错过了什么？

Answer 1

没有错误也没有奇怪的行为。

您已将所有容器设置为position: fixed。因此他们的定位是相对于窗户的。

所以虽然距离顶部的距离永远不会改变，但底部距离会根据屏幕大小而变化。如果您调整窗口大小，您将看到位置变化，并且在某些时候该框会排队。

事实上，您正在测量距离顶部的距离，然后将其应用到底部，这很可能会失败，因为屏幕必须是正确的大小。

基本上，你问的问题是：
如果方块的顶部是100px，那么为什么当我从底部制造100px的包容包装时，他们不排队？