Document flow — CSS: Positioning

Document flow in HTML refers to the order in which elements are rendered on a page. Normally, all blocks are rendered in the order they're written in the HTML document. This order can be changed, however, and this is what this course will be about.

Before looking at possible document flows, it's worth remembering how block and inline elements are rendered.

When you create a markup, the block elements are rendered below each other as specified in the HTML document. This kind of layout:

<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>

expects to give us three text phrases under each other:

Block 1
Block 2
Block 3

Browsers use special rules to define how items are displayed on the screen, which makes this possible. The main property of block elements is that they occupy the entire width, so all block elements are displayed below each other.

Imagine you're putting boxes in a drawer. The drawer isn't wide enough to place the boxes side by side, so the only option available is to stack them on top of each other. This is how block-level elements behave when displayed by the browser.

In addition to block elements in HTML, there are also inline elements. Their main difference is that they don't take up all the width available to them, but rather just the width needed to display the content within the element. Because of this, several consecutive line items will be displayed one after the other, without a line break. This behavior is also standard in all browsers.

Arranging little boxes on a shelf is a good analogy for this behavior. There's enough space to arrange them in a row.

A layout wherein block and line HTML elements are rendered one after the other in the order in which they are marked in the file is called "Normal Document Flow".

It is possible to output an element from the normal flow using CSS rules There are several other types of document flow:

• Floating Flow. This is created using the CSS property float
• Flow with absolute positioning. This is created using the position: absolute property. We'll look at it in more detail in upcoming lessons. All you need to know is that absolute positioning pulls the element out of the flow and allows it to be placed anywhere in the page.

Combining all kinds of flows, and block and line elements is the main basis for creating any site. It is essential not to limit yourself to a single approach when other tools are available that allow you to deliver information to the user more conveniently.