Chapter 3. Normal Flow and Positioning
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 ...