Every web component will be appended to the DOM and ultimately rendered to the screen for users to interact with. Understanding where and how an element, the building block of a web component, is positioned is key to developing web components.
The two key concepts for understanding how the browser lays out a page are normal flow and positioning.
The browser renders elements by placing them on a page according to what is known as normal flow.
Per the W3C CSS 2.1 specification:
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
Let’s translate this W3C-speak into something someone other than a browser developer can understand.
“Boxes” refers to the box model, which describes how boxes ...