jquery - 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。因此它们的定位是相对于窗口的。

因此，虽然与顶部的距离永远不会改变，但与底部的距离会根据屏幕尺寸而变化。如果您调整窗口大小，您会看到位置发生变化，并且在某个时候框会对齐。

事实上，您是在测量与顶部的距离，然后将其应用到底部，这使得这更有可能失败，因为屏幕的尺寸必须完全正确。

基本上，您是在问:
例如，如果盒子距离顶部 100 像素，那么为什么当我制作容器包装器距离底部 100 像素时它们不对齐？