Normal Flow of Elements

When elements are displayed on the screen, they will appear as close to the top and left edges of their parent elements as possible. They will also appear either as blocks or inline elements.

This is known as the normal flow of elements.

We can control how an element is normally positioned in this flow with the position property! By default, all elements have a static position:

position: static;

TWo block-level div elements, 1 red and 1 blue, in default static position.

These two block-level <div> elements follow the normal flow where the red <div> renders first and the blue <div> renders on the very next line.

Note: It usually isn’t necessary to set position to static since this is the default for all elements.