offsetParent算法分析

<!DOCTYPE HTML>
<html id="html">
    <head>
        <title>offsetParent by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="mass.js">

</script>
        <style type="text/css">
            body,html{
                height:100%;
                background:orange;
            }
            #relative {
                position: relative;
            }
            div{
                width:100px;
                height:100px;
                background: red;
                margin:10px;
            }
            #aaa,#eee,#iii,#mmm,#qqq{
                position: relative;
            }
            #bbb,#fff,#jjj,#nnn,#rrr{
                position: absolute;
            }
            #ccc,#ggg,#kkk,#ooo,#sss{
                position: fixed;
                background: blue;
            }
            #td2 {
                position: relative;
            }
            td{
                background: green;
            }
            form{
                margin-left:160px;
            }
        </style>
        <script>

</div>
            <div id="bbb">

</div>
            <div id="ccc">

</div>
            <div id="ddd">

</div>
        </blockquote>
        <blockquote id="relative">
            <div id="eee">

</div>
            <div id="fff">

</div>
            <div id="ggg">

</div>
            <div id="hhh">

</div>
        </blockquote>
        <table border="1" id="table">
            <tr>
                <td id="td"><div id="iii"></div><div id="jjj"></div><div id="kkk"></div><div id="lll"></div></td>
            </tr>
            <tr>
                <td id="td2" ><div id="mmm"></div><div id="nnn"></div><div id="ooo"></div><div id="ppp"></div></td>
            </tr>
        </table>
        <table  style="float:left;border:1px solid black; position: relative;" id="table">
            <tr>
                <td id="td3"><div id="qqq"></div><div id="rrr"></div><div id="sss"></div><div id="ttt"></div></td>
            </tr>
        </table>

</body>
</html>

根据其自身定位情况与父节点的标签类型与定位情况，分为以下二十种情况（IE8， chrome23, opera12的结果）：

没有已定位的父节点，且自身position: relative的DIV元素的offsetParent为BODY
没有已定位的父节点，且自身position: absolute的DIV元素的offsetParent为BODY
没有已定位的父节点，且自身position: fixed的DIV元素的offsetParent为BODY
没有已定位的父节点，且自身position: static的DIV元素的offsetParent为BODY
拥有一个已定位的父节点，且自身position: relative的DIV元素的offsetParent为其最近被定位的祖先
拥有一个已定位的父节点，且自身position: absolute的DIV元素的offsetParent为其最近被定位的祖先
拥有一个已定位的父节点，且自身position: fixed的DIV元素的offsetParent为BODY
拥有一个已定位的父节点，且自身position: static的DIV元素的offsetParent为其最近被定位的祖先
在table之内，td与table都没有定位，且自身position: relative的DIV元素的offsetParent为BODY
在table之内，td与table都没有定位，且自身position: absolute的DIV元素的offsetParent为BODY
在table之内，td与table都没有定位，且自身position: fixed的DIV元素的offsetParent为BODY
在table之内，td与table都没有定位，且自身position: static的DIV元素的offsetParent为其最近的TD、TH元素
在table之内，td相对定位，且自身position: relative的DIV元素的offsetParent为其最近的TD、TH元素
在table之内，td相对定位，且自身position: absolute的DIV元素的offsetParent为BODY
在table之内，td相对定位，且自身position: fixed的DIV元素的offsetParent为BODY
在table之内，td相对定位，且自身position: static的DIV元素的offsetParent为其最近的TD、TH元素
在table之内，table相对定位，且自身position: relative的DIV元素的offsetParent为其最近的TABLE元素
在table之内，table相对定位，且自身position: absolute的DIV元素的offsetParent为其最近的TABLE元素
在table之内，table相对定位，且自身position: fixed的DIV元素的offsetParent为BODY
在table之内，table相对定位，且自身position: static的DIV元素的offsetParent为其最近的TD、TH元素

我们可以总结以下几条规律：

a)	position为fixed元素是没有offsetParent，但firefox统一返回body。
b)	position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,没有找最近的td,th元素，再没有找body。
c)	position为static的元素的offsetParent则是先找最近的td,th元素，再没有找body。
d)	body为最顶层的offsetParent。

posted on 2012-10-30 17:42 司徒正美阅读(3462) 评论(5) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

offsetParent算法分析