CSS document flow
If I understand document flow and three properties’ effects on it, I can determine where elements will land. The
position properties manipulate elements from their default position in the “document flow”.
display affects an elements response to box model properties:
padding. It also decides whether elements can sit horizontal to it: “inline” yes, “block” no.
float pulls things out of the normal flow and makes the normal things flow around it. The
position property determines how something treats its default position in the flow. One can classify
position values as “in-flow” and “out-of-flow” (Rosato, 21 December, 2018). There are two in-flow positions: “static” and “relative”. In-flow elements keep their spot unless offset with
left or a transform. Out-of-flow positions not discussed here.