Question

有人可以帮我解释一下。我遇到过这个关于更大项目的工作，需要了解为什么会这样。

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

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

但事实并非如此。请参阅此jsfiddle以获取示例：http://jsfiddle.net/U4XH4/当我输出第一个div的底部和第二个div的顶部时，两者都显示为100px。 Tihs对我没有意义！

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

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

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

不完全：如果top位于0而height位于1，则该框仅占用0行 - 所以如果下一个框位于top = 1，则没有重叠。

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

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

1 个答案: