Relatively positioned divs overlap - share same row of pixels

Question

Can someone please shed some light on this for me. I have come across this working on a larger project and need to understand why this is happening.

For a really simple example let say we have two relatively positioned divs. One on top of another. Each 100x100px. Logically the first div offset().top will be 0px. It has a height of 100px. So its bottom offset (offset().top + height()) should be 100px;

The second div which is positioned relative to the other div should have an offset().top of 101px right? Otherwise the top of the second div is overlapping with the bottom of the first div by 1px.

But this is not the case. See this jsfiddle for an example: http://jsfiddle.net/U4XH4/ When I output the bottom of the first div and the top of the second div the both show as 100px. Tihs doesn't make sense to me!

Any clarification would be greatly appreciated. Sorry if this is a really stupid question...

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;

Not quite: If the top is at 0 and the height is for example1, the box would take up row 0 only - so there is no overlap if the next box is at top = 1.

In your case, the first box takes up rows 0, 1, ..., 99 for a height of 100, and the next box starts at 100 with no overlap.