Three basic positioning mechanisms in CSS

Three basic positioning mechanisms in CSS

A. Normal document flow

B. Positioning: Relative positioning

Absolute positioning

Fixed positioning

C. Floating

1. In the normal stream, the element position is determined by the document order and the element nature, the block-level elements are arranged from top to bottom, the vertical distance between the boxes is calculated from the vertical margin value of the box, and the inline elements are arranged horizontally in one row

2. Relative positioning as part of the normal flow, the moved element still occupies the original position, moving the element will cause him to cover the other boxes

3. Absolute positioning relative to the nearest ancestor element that has been positioned, absolute positioning out of normal flow

4. Fixed positioning is relative to the browser window positioning

5. The floating element can move around until the edge of his outer border touches the edge of his own box or another floating box

6. Floating elements out of normal document flow

7. Inline elements and inline block elements are arranged around a floating box, and block elements are overwritten