DOM and CSS positioning

offsetXXX、scrollXXX 与clientXXX的区别与联系

offsetTop returns the distance of the current element relative to the top of the offsetParent node.

offsetLeft Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

offsetHeight returns height of an element relative to the element's offsetParent.

offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.

Notes

offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.

• clientHeight
• clientLeft
• clientTop
• clientWidth
• offsetHeight
• offsetTop
• offsetLeft
• offsetWidth
• scrollTop
• scrollHeight
• scrollWidth
• style.border
• style.left
• style.marginTop
• style.paddingLeft
• style.top

 

offsetParent的理解

MDC中对offsetParent的介绍是这样的：

offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest table cell or root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent. offsetParent returns null when the element has style.display set to "none". The offsetParent is useful because offsetTop and offsetLeft are relative to its padding edge.

在td中的元素会把第一个绝对／相对定位的hierarchy parent当作offsetParent，如果没有找到需要分三种情况讨论

1. 如果该元素没有绝对／相对定位，则会把td当作offsetParent
2. 如果该元素绝对／相对定位并且table没有绝对／相对定位，则会把body当作offsetParent
3. 如果该元素绝对／相对定位并且table绝对／相对定位，则会把table当作offsetParent

Javascript code:

 

        function checkoffsetParent() {
            var div = document.getElementById( " parentdiv " );
            alert(div.offsetParent.tagName);
            div = document.getElementById( " sondiv " );
            alert(div.offsetParent.tagName);
            var td = document.getElementsByTagName( " td " )[ 0 ];
            alert(td.offsetParent.tagName);
        }

 

1.

< body onload ="checkoffsetParent()" >
    < table border ="1" align ="right" >
        < tr >
            < td id ="oCell" style ="position: fixed; top: 200px; left: 300px;" >
                < div id ="parentdiv" style ="position: relative" > parentdiv

                    < div id ="sondiv" >s ondiv </ div >
                </ div >
            </ td >
        </ tr >
    </ table >
</ body >

 

运行结果：

parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id     IS　"parentdiv"

2.

 

    < table border ="1" align ="right" >
        < tr >
            < td id ="oCell" >
                < div id ="parentdiv" style ="position: relative" >
                    parentdiv
                    < div id ="sondiv" style ="position: relative" >
                        sondiv </ div >
                </ div >
            </ td >
        </ tr >
    </ table >

 

运行结果：

parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id     IS　"parentdiv"

3.

    < table border ="1" align ="right" >
        < tr >
            < td id ="oCell" >
                < div id ="parentdiv" >
                    parentdiv
                    < div id ="sondiv" style ="position: relative" >
                        sondiv </ div >
                </ div >
            </ td >
        </ tr >
    </ table >

运行结果：

parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.id     IS　"body"

这个结果是比较有意思的，但它也是符合上面总结的规则的。

4.

    < table border ="1" align ="right" >
        < tr >
            < td id ="oCell" >
                < div id ="parentdiv" >
                    parentdiv
                    < div id ="sondiv" >
                        sondiv </ div >
                </ div >
            </ td >
        </ tr >
    </ table >

运行结果：

parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.id     IS　"TD"

5.

    < table border ="1" align ="right" style ="position: relative" >
        < tr >
            < td id ="oCell" >
                < div id ="parentdiv" style ="position: relative" >
                    parentdiv
                    < div id ="sondiv" style ="position: relative" >
                        sondiv </ div >
                </ div >
            </ td >
        </ tr >
    </ table >

运行结果：

parentdiv.offsetParent.tagName IS "Table"
sondiv.offsetParent.id     IS　"pareentdiv"

 

Reference：http://www.cnblogs.com/NRabbit/archive/2009/01/11/1736202.html

http://www.cnblogs.com/panjun-Donet/articles/1294033.html