Javascript 相对定位的div重叠-共享相同的像素行

有人能帮我解释一下吗。我在一个更大的项目中遇到过这种情况，需要理解为什么会发生这种情况

对于一个非常简单的例子，假设我们有两个相对定位的div。一个接一个。每台100x100px。逻辑上，第一个div

offset（）。top

将为0px。它的高度为100像素。所以它的底部偏移量

（offset（）.top+height（））

应该是100px

相对于另一个div定位的第二个div应具有

偏移（）？否则，第二个div的顶部与第一个div的底部重叠1px

但事实并非如此。查看这个JSFIDLE的例子：当我输出第一个div的底部和第二个div的顶部时，两者都显示为100px。这对我来说毫无意义

如有任何澄清，将不胜感激。抱歉，如果这是一个非常愚蠢的问题

HTML:

jQuery：

    $(function(){
        $('p').click(function(){
            $('div').each(function(){
                $this = $(this);
                var top = $this.offset().top;
                var bottom = ( $this.offset().top + $this.height() );

                console.log('top: '+top);
                console.log('bottom: '+bottom);
            });
        });
    });

所以它的底部偏移量（offset（）.top+height（））应该是100px

不完全正确：如果
顶部
位于
0
，并且
高度
例如为
1
，则该框将仅占用行
0
，因此如果下一个框位于
顶部=1
，则不会重叠

在您的例子中，第一个框占据行
0,1，…，99
，高度为100，下一个框从100开始，没有重叠

body{
    margin:0;
}

div{
    width:100px;
    height:100px;
    background:green;
}

    $(function(){
        $('p').click(function(){
            $('div').each(function(){
                $this = $(this);
                var top = $this.offset().top;
                var bottom = ( $this.offset().top + $this.height() );

                console.log('top: '+top);
                console.log('bottom: '+bottom);
            });
        });
    });