offsetParent、offsetLeft/offsetTop深度剖析

時間 2019-12-09

標籤 offsetparent offsetleft offsettop 深度剖析简体版

原文原文鏈接

element.offsetParent

定義

element.offsetParent爲包含element的祖先元素中，層級最近的定位元素。也就是說，offsetParent必須知足三個條件：css

是element的祖先元素
最靠近element
是定位元素，即position屬性不爲static

<div class="position-outer" style="position: relative;">
    <div class="position" style="postion: relative;">
        <div class="not-position">
        	<div class="box">
        	</div>
        </div>
    </div>
</div>
複製代碼

打印box元素的offsetParent:html

因而可知，box祖先元素中存在:

層級爲3的定位元素 position-outer
層級爲2的定位元素 position-inner
層級爲1的非定位元素 not-position

position-inner是同時知足層級最近和定位兩個條件的。web

祖先元素中不存在定位元素

<div class="box"></div>
複製代碼

webkit內核、Firefox下的特殊狀況

element自身的display屬性爲none

<div class="position-outer" style="position: relative;">
    <div class="position" style="postion: relative;">
        <div class="not-position">
        	<div class="box" style="display: none;"> <!-- 注意這裏! -->
        	</div>
        </div>
    </div>
</div>
複製代碼

element自身的position屬性爲fixed

<div class="position-outer" style="position: relative;">
    <div class="position" style="postion: relative;">
        <div class="not-position">
        	<div class="box" style="position: fixed;"> <!-- 注意這裏! -->
        	</div>
        </div>
    </div>
</div>
複製代碼

element.offsetWidth / element.offsetHeight

定義

offsetWidth = content + (垂直滾動條的寬度) + padding + borderbash

無滾動條狀況下

<div class="box" style="">
</div>
複製代碼

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 12px solid red;
    margin: 25px;
}
複製代碼

打印element.offsetWidth:

offsetWidth = 200(content) + 20 * 2(padding) + 12 * 2(border) = 264

有滾動條狀況下

能夠看到，滾動條包含在padding中，所以，offsetWidth與在無滾動條狀況下，大小不變。

element.offsetLeft / element.offsetTop

定義

element左上角相對於offsetParent左邊界的偏移值。post

有個疑問？ element的左上角與 offsetParent的左邊界如何定義？是content-box、padding-box仍是margin-box?spa

<div class="position">
    <div class="box">
    </div>
</div>
複製代碼

.position {
    position: relative;
    top:  0;
    left:  0;
    width: 400px;
    height: 200px;
    padding:  35px;
    border: 15px solid purple;
}

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border:  12px solid red;
    margin:  25px;
}
複製代碼

很明顯，box的offsetParent爲postion3d

打印box.offsetLeft和box.offsetTop:

在文檔流中，box的整個margin-box是在position的content-box中的，由此可猜想：code

box.offsetLeft = position.paddingLeft + box.marginleft = 35 + 25 = 60cdn

真的是這樣嗎？其實並無那麼簡單，須要分兩種狀況討論：htm

element在正常文檔流中

element.offsetLeft是指element的border-box左上角相對offsetParent的content-box的偏移量

因爲position: relative的元素並無脫離文檔流，所以，也須要加入到offseLeft/offsetTop的計算中

修改box css屬性:

.box {
    position: relative; /* 新增的 */
    top: 31px;          /* 新增的 */
    left: 31px;         /* 新增的 */
    width: 200px;
    height: 100px;
    padding: 20px;
    border:  12px solid red;
    margin:  25px;
}
複製代碼

再次打印box.offsetLeft和box.offsetTop：

二者的值都增長了31，也就是top和left屬性對應的值，由此更新計算公式：

element.offsetLeft = offsetParent.paddingLeft + element.left + element.marginLeft

可是，以上都是在最簡單的狀況下計算的，即element與element.offsetParent之間沒有其它層級的元素存在！

咱們在element與element.offsetParent之間再插入一個元素：

<div class="position">
    <div class="middle">    <!-- 新增的 -->
        <div class="box">
        </div>
    </div>
</div>
複製代碼

.parent {
    width: 30px;
    height: 150px;
    padding:  11px;
    border:  12px solid pink;
    margin-left:  13px;
}
複製代碼

打印box.offsetLeft和box.offsetTop：

二者的值又變化了！相比上次又增長了36，正好是parent的marginLeft、borderLeft 、paddingLeft之和，11 + 12 + 13 = 36，由此獲得最終的計算公式：

element.offsetLeft = offsetParent.paddingLeft + element.left + element.marginLeft + (element與element.offsetParent之間全部在正常文檔流且position屬性不爲relative的元素 marginLeft、borderLeft、paddingLeft之和)

element與element.offsetParent之間存在浮動元素

如今，咱們讓parent向右浮動：

.parent {
    float: right;
    width: 30px;
    height: 150px;
    padding:  11px;
    border:  12px solid pink;
    margin-left:  13px;
}
複製代碼

打印box.offsetLeft和box.offsetTop：

此次只有box.offsetLeft變化了，並且也能夠猜想到是因爲parent的右浮，box是其子元素，一塊兒右浮，致使box.offsetLeft變化的。

這下要怎麼計算？難道還要算浮動的距離嗎？

並不須要！只要藉助parent就能計算！仔細想一想，element與element.offsetParent必定是沒有浮動元素的，那麼對於parent，其offsetParent也就是box的offsetParent，即postition。

咱們打印下parent.offsetleft：

再計算box到parent之間的偏移量： box.left + box.marginLeft + parent.paddingLeft + parent.borderLeft + parent.marginLeft = 31 + 25 + 11 + 12 + 13 = 92

76 + 92 = 168，與box.offsetLeft一致，這也說明咱們的計算公式是正確的！

element脫離文檔流

也就是說element的display屬性爲absolute或fixed，因爲fixed會致使offsetParent爲null，因此咱們將box的display設置爲absolute：

<div class="position">
    <div class="box">
    </div>
</div>
複製代碼

.box {
    position: absolute; /* 新增的 */
    top: 31px;
    left:  31px;
    width: 200px;
    height: 100px;
    padding: 20px;
    border:  12px solid red;
    margin:  25px;
}

.position {
    position: relative;
    top:  0;
    left:  0;
    width: 400px;
    height: 200px;
    padding:  35px;
    border: 15px solid purple;
}
複製代碼