Three positioning mechanisms in css

Three basic positioning mechanisms in css

a. Ordinary document flow

b. Positioning: relative positioning

Absolute positioning

Fixed positioning

c. Floating

1. In ordinary flow, the position of elements is determined by the document order and element properties. Block-level elements are arranged in order from top to bottom, and the vertical distance between boxes Calculated from the vertical margin value of the box, inline elements are arranged horizontally in a row

2. Relative positioning is regarded as part of the normal flow. The moved element still occupies the original position. Moving the element will cause it to cover other The box

3. Absolute positioning is relative to the positioned nearest ancestor element, and absolute positioning is out of the ordinary flow

4. Fixed positioning is relative to the positioning of the browser window

5. The floating element can move left and right until the edge of its outer border touches the edge of the box containing itself or another floating box

6. The floating element breaks away from the ordinary document flow

7. Inline elements and inline block elements will be arranged around the floating box, and block elements will be covered

For more articles related to the three positioning mechanisms in CSS, please pay attention to the PHP Chinese website!