Developing Web Components

Chapter 3. Normal Flow and Positioning

Jason Strimpel

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.

Not understanding fundamental layout concepts can have a great impact on your web component’s design and implementation. For instance, depending on the requirements, a modal dialog can be rendered by calculating its size relative to the viewport and positioning it absolutely, or a simpler technique using fixed positioning and margins can be utilized. The latter technique uses pure CSS to do the positioning, so it performs much better, and the likelihood of bugs is decreased because you are doing significantly less DOM manipulation via JavaScript.

The two key concepts for understanding how the browser lays out a page are normal flow and positioning.

Normal Flow

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 ...