相對定位的div重疊 - 共享相同的像素行

有人可以請爲我闡明這一點。我遇到了一個更大項目的工作，需要理解爲什麼會發生這種情況。相對定位的div重疊 - 共享相同的像素行

對於一個非常簡單的例子，假設我們有兩個相對定位的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); 
      }); 
     }); 
    });

來源

2014-06-06 user3065931

所以其底部偏移（偏移（）.top + height（））應該是100px;

不太：如果top在0和height是例如1，該框將只佔用一行0 - 所以不存在重疊，如果下一個框是top = 1。

在你的情況下，第一個盒子佔據行0, 1, ..., 99的高度爲100，下一個盒子從100開始不重疊。

來源

2014-06-06 14:15:00 akxlr

相對定位的div重疊 - 共享相同的像素行

回答

相關問題