Question

我看到顶部和底部定位之间存在奇怪的差异。我已经汇总了四个简单的例子来证明这个问题：

//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，那么为什么当我从底部制作100-x包容器时它们不会排成一行？

jQuery顶级与底部位置的奇怪行为

1 个答案: