offsetParent是一個DOM屬性,它返回最近的已定位(position不是static)的父元素。利用offsetParent可以實現一些布局技巧,比如實現元素相對于某個父元素進行定位、居中對齊等操作。
下面是幾種利用offsetParent實現布局技巧的方法:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;">相對定位</div>
</div>
<div style="position: relative; height: 200px;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">垂直居中</div>
</div>
<div style="position: relative; width: 200px;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">水平居中</div>
</div>
通過利用offsetParent屬性和以上布局技巧,可以實現各種復雜的頁面布局效果。