关于table-cell 中 offsetParent的一些困惑

MDN 上关于 HTMLElement.offsetParent 的描述如下:

The **HTMLElement.offsetParent
** read-only property 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.displayset to "none". The offsetParent is useful because offsetTop and offsetLeft are relative to its padding edge.

关于其中的 the nearest table cell , 我做了一下验证,代码如下:

使用 table>tr>td




    



    

offsetParent is:

关于table-cell 中 offsetParent的一些困惑_第1张图片
使用 table

使用 display:table-cell

但如果 使用 table-cell来模拟 单元格,结果就不一样了。





    



    

offsetParent is:

关于table-cell 中 offsetParent的一些困惑_第2张图片
使用 display:table-cell

被包含元素使用 定位

如果被包含元素上使用了position ,则 offsetParent 也会变成 body.




    



    

offsetParent is:

关于table-cell 中 offsetParent的一些困惑_第3张图片
被包含元素使用定位

结论

  1. 如果被包含元素自身有定位
  2. 如果有定位祖先元素,则 offsetParent 是最近的有定位的祖先节点。
  3. 如果无定位祖先元素,则 offsetParent 是body。
  4. 如果被包含元素自身没有定位
  5. 如果有定位祖先元素(td table 也属于定位),则 offsetParent 是最近的有定位的祖先节点。
  6. 如果无定位祖先元素,则 offsetParent 是body。

你可能感兴趣的:(关于table-cell 中 offsetParent的一些困惑)