CSS positioning, position and float simultaneous use of the situation

First, CSS positioning

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

1. Normal flow: Elements not specifically specified are located in the normal flow, position:static/relative; and Float:none; also located in the normal flow.

2. Absolute positioning: position:absolute/fixed; element box out of normal document flow.

3. Floating: Float:left/right; element out of normal document flow.

Second, the use of position and float in the case of the elements

The practice found that both position and float who write in front or behind, are position first function.

1. When position is absolute/fixed, the element is detached from the document stream, and the element is applied with float invalidated (that is, does not work).

2. When position is static/relative, the element is still in the normal stream, and the element is applied to float.

　　

The difference between the absolute positioning mechanism and the floating positioning mechanism of the CSS positioning mechanism

1. After position the element out of the normal stream, the element does not occupy space and uses top/bottom/left/right to determine the position.

2. When the element is separated from the normal stream with float, the element occupies space , determines the distance from the surrounding content with margin,padding, and so on.

(The text for learning Exchange, welcome to explore together ~)

CSS positioning, position and float simultaneous use of the situation