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로 줄이는 이유는 무엇입니까?