There are three types of positioning mechanisms in CSS:
1. Document flow 2. Float 3. Position
The so-called document flow, that is, in the process of element typesetting and layout, elements will automatically flow from left to right and from top to bottom.
To get out of the document flow, that is, to remove the elements from the ordinary layout and typesetting (disorder the arrangement order), when other boxes are positioned, they will be positioned as if the elements that are out of the document flow do not exist. PS: Only absolute positioning absolute and floating float will break out of the document flow.
position：absolute
Generate absolutely positioned elements, positioned relative to the first parent element other than static positioning, out of the document flow;
position:fixed
Generate absolutely positioned elements, positioned relative to the browser window;
position:relative
Generate relatively positioned elements, and position them relative to their normal positions, that is, between the original upper, lower, left and right elements, the upper, lower, left and right elements remain unchanged and will not be separated from the document flow.
float:left leaves the document flow