CSS Gap Filler 3 (Containing Blocks / Percentage Sizes / Positioning)

Containing Block (containing block)

For normal elements, the reference is the parent element's content area.
For absolutely positioned elements, the reference is the padding + content area of the nearest positioned ancestor (position != static).
For fixed positioned elements, the reference is the viewport (unless an ancestor has created a new containing block via transform/filter/perspective).

Percentage Sizing

The padding and margin are rarely set as percentages; if they are, they are relative to the width of the containing block. This includes padding-top and margin-top, which also reference the width rather than the height.

border cannot be given a percentage.

Percentage height: if the parent element does not have an explicit height (or its height is determined by content), the percentage will be ignored. However, this is not the case inside a flex or grid container.

transform: translate(50%) – references the element's own dimensions.

Positioning

Five positioning types:

static: normal document flow. left, right, top, bottom have no effect.
relative: offset from the normal document flow. Commonly used for fine-tuning or as a reference for absolute positioning.
absolute: positioned relative to its containing block, removed from the document flow; the element's display becomes block.

If the parent element has no positioned ancestor, the containing block is the initial containing block (i.e., the content area of the <html> element, whose size equals the viewport and whose origin is at the document's top-left corner). If you set bottom in this case, the distance is calculated from the bottom of the visible viewport.

fixed: positioned relative to its containing block, removed from the document flow. On screen devices, it is based on the viewport; on a printer, it appears on every page.
sticky: its reference is the nearest scrolling ancestor. If there is no scrolling ancestor, it uses the viewport.
A threshold must be specified.