1

我看到顶部和底部定位之间存在奇怪的差异。我整理了四个简单的例子来演示这个问题：

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 没有。似乎有大约 30 像素的差异。

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

4

1 回答 1

1

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

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

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

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

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

于 2013-05-19T17:35:49.447 回答