containing block vs HTMLElement.offsetParent

Published 17 Feb 2019 · tagged with css

Containing block is a key concept in html layout, which impacts the size and position of an element.
And the process of identifying it is rather complex: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block

While you might be tempted to use HTMLElement.offsetParent to programmatically get the containing block, it doesn't always get what you want.

HTMLElement.offsetParent is simple, it only returns the closest (nearest in the containment hierarchy) positioned containing element. One rule contradicting this for containing block as following:

  1. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:
    1. A transform or perspective value other than none
    2. ...

Thanks to our open source community, I found a JS library mezr can do this.