Why use positioning
1. When we need a box to press another box, such as:
2. When we need a box to be fixed in a place on the screen, such as:
Positioning composition
Positioning : Positioning: The box is positioned at a certain position, so positioning is also about placing the box, and moving the box according to the positioning method.
Positioning = positioning mode + edge offset.
Positioning mode : used to specify the positioning method of an element in the document. The edge offset determines the final position of the element.
Positioning mode
1. Static positioning Static
static positioning is the default positioning method for elements and has no meaning for positioning. grammar:
选择器{
position : static; }
Static positioning is placed in accordance with the standard flow characteristics. It has no edge offset. Static positioning is rarely used in layout.
2. Relative positioning.
Relative positioning is when the element is moving, relative to its original position. grammar︰
选择器{
position: relative; }
1. It moves relative to its original position (the reference point is its original position when moving the position).
2. The original position in the standard stream continues to be occupied, and the subsequent boxes still treat it in the standard stream. (Do not fall off the standard, continue to keep the original position) Therefore, the relative positioning does not fall off the standard.
3. Absolute positioning absolute
absolute positioning is when the element is moving, it is relative to its ancestor element. Syntax:
选择器{
position: absolute; }
1. If there is no ancestor element or the ancestor element is not positioned, the browser shall prevail (Document document).
2. If the ancestor element has positioning (relative, absolute, fixed positioning), the position is moved based on the nearest ancestor element with positioning as the reference point.
3. Absolute positioning no longer occupies the original position. (Off-label)
4. Fixed positioning fixed
positioning is the position where the element is fixed in the viewable area of the browser. Main usage scenario: The position of the element will not change when the browser page is scrolled. grammar:
选择器{
position : fixed; }
Features of fixed positioning: (must remember)
1. Move elements with the visual window of the browser as a reference point. It has nothing to do with the parent element and does not scroll with the scroll bar.
2. The fixed position does not occupy the original position.
Fixed positioning is also off-standard. In fact, fixed positioning can also be regarded as a special absolute positioning.