offsetParent算法分析

本文轉載自查看原文 2012-10-30 17:42 3001 javascript

<!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 司徒正美閱讀(3001) 評論(5) 編輯收藏

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 TimSort算法分析算法與算法分析眾數的算法分析共識算法分析 join算法分析算法分析 popcount 算法分析算法分析-漸進分析 AES算法分析與實現最短路算法分析