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

Question

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

举一个非常简单的例子，假设我们有两个相对定位的 div。一个在另一个之上。每个 100x100 像素。从逻辑上讲，第一个 div offset().top 将为 0px。它的高度为 100px。所以它的底部偏移(offset().top + height())应该是100px;

相对于另一个 div 定位的第二个 div 的 offset().top 应该为 101px，对吧？否则，第二个 div 的顶部与第一个 div 的底部重叠 1px。

但事实并非如此。请参阅此 jsfiddle 的示例:http://jsfiddle.net/U4XH4/当我输出第一个 div 的底部和第二个 div 的顶部时，两者都显示为 100px。这对我来说毫无意义!

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

HTML:

<div id="d1"></div>
<div id="d2"></div>

<p>click</p>

CSS:

body{
    margin:0;
}

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

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);
            });
        });
    });

Answer 1

So its bottom offset (offset().top + height()) should be 100px;

不完全是:如果top位于0并且height例如1，则该框仅占用行 0 - 因此，如果下一个框位于 top = 1 处，则不会重叠。

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