Is the box model undesirable?

The outermost container in your HTML is the initial containing block. A containing block is just a rectangle that contains an element, a containing block is also an element.

If an element has relational positioning the containing block is formed by the content edge of the nearest block container or ancestor block.

From a JavaScript perspective try to consider the term form as being similar to how you consider “this”, and the initial containing block as the global scope. Although, they’re not realistically comparable, if so functions would also inherit the scope of neighbour functions.

Relative positioning

One major flaw of relative positioning in CSS is that elements only float horizontally. Unfortunately, the CSS Flexbox property doesn’t solve this incapability, nor does it tackle it sincerely. But to be honest, it was never intended to.

Absolute positioning

With absolute positioning, the format of the containing block is determined via the nearest ancestor with a defined attribute of either absolute, relative or fixed. The issue with this aspect of the model is that you’re always depending on unwanted attributes, you have no choice but to override them or create more containers to work against undesirable behaviours that were maybe desirable 19 years ago.

Inline, you’re drunk go home

If the nearest ancestor is an inline element, the containing block forms to the bounding box of that inline element, neighbour elements or by the padding edge of the nearest ancestor… yes, it’s boring and messy.