The normal flow of a page is how HTML elements are normally rendered to a page. The browser starts reading (and displaying) content from the top of the page to the bottom. When it encounters visible HTML elements, there are two primary ways that elements are displayed on a page: block and in-line.
Block Elements
Block elements take up the entire entire width of their container and are stacked vertically on the page; i.e. block elements is start on their own line. Examples of elements that a normally displayed as a block element are: <p>, <div>, <h1-7>, <header>, <footer>, <section>, <table>, etc.
In-line Elements
In-line elements are laid out horizontally on the page. Their width only takes up the horizontal space necessary for the element. Examples of inline elements are: <span>, <em>, <strong>, <a>, <img>, etc.
Modifying the Defaults
CSS allows us to set (modify) the default properties of HTML elements. The position and display properties affect that normal (default) flow of elements on a page; flow meaning how the elements interact with the elements around them. When two div tags are put next to each other, by default they appear vertically on the page. That’s because they are block elements.
When two images are put next to each other, by default they appear side by side on the page. That’s because they are in-line elements.
When we assign a value of absolute or fixed to an element’s position property, the element is taken out of the normal flow. The spacial relationship that element has with the other elements on the page are changed. It’s almost as if the other elements don’t see it any more. From the other elements point of view, since it isn’t there, they move in to take up that space. It’s like a big rock in a river. The water flows around the rock. Pull the rock out of the river, the water fills in to fill the void left by the absence of the rock. Make an element absolutely positioned, the elements that follow it rush in to fill the void.