'position:absolute' & Its Containing Block
Reference
- MDN
Concept
In [reference 1 > Identifying the containing block], there are two rules. Let me explain them from now on.
Rule 1
Content
Let me quote what reference 1 said.
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
The word 'padding box' is important. If 'left:0' is applied, the child sticks to the border even if the element that has the containing block has padding more than 0.
Usually, if properties like 'top' or 'left' is not designated, the child goes to 'top:0' or 'left:0' by the content, not padding, of the element that has the containing block. (Chrome, Firefox)
If all the ancestor elements are static, the padding box of <body> becomes the containing block.
Example
|all the ancestor elements are static|
|the parent element is static and the grandparent element is relative|
|none of properties are designated|
Rule 2
Content
Let me quote what reference 1 said.
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:
- A transform or perspective value other than none
- A will-change value of transform or perspective
- A filter value other than none or a will-change value of filter (only works on Firefox).
- A contain value of paint (e.g. contain: paint;)
- A backdrop-filter other than none (e.g. backdrop-filter: blur(10px);)
Example
|'transform' values are used|