I personally summarize the four positions in css, cssposition

I personally summarize the four positions in css, cssposition

1. positon: static; static location (Default)

All elements in the standard document stream are static positioning

2. positon: relative; relative positioning

　　Keep away from the standard Document Stream, "keep your hometown in trouble and separate shadows"

Features: If relative positioning is set and the top, left, right, and bottom attributes are set, the box will be offset at the original position of the box in the future.

The purpose of relative positioning: Generally, it is not used for "capping effect". It has two functions:

(1) fine-tuning Elements

(2) Absolute Positioning Reference, sub-parent

You can use left and right to describe the offset of the right and left boxes. You can use top and bottom to describe the offset of the bottom and top boxes.

Position: relative; top: 10px; left: 10px; // move 10px down from the original position to the right

Position: relative; top:-10px; left:-10px; // move 10px to the left relative to the original position

3. position: absolute; absolute positioning

　　Exit standard Document Stream

Features: (1) if this element does not have a parent element, top, left, right, and bottom will be located relative to the browser window in the future.

(2) If the absolute positioning element has a parent element but the parent element is not relatively located, the top, left, right, and bottom are located relative to the browsing window.

(3) If the absolute positioning element has a parent element and the parent element has a location (non-static), the absolute positioning element offset is based on its own parent element.

(4) The element after absolute positioning will not occupy the position on the page

4. position: fixed; fixed Positioning

Exit standard Document Stream

Fixed positioning purpose: Some Small advertisements on the page must be fixed in a position on the page

 

Conclusion: when writing a page in the future, the most commonly used is not absolute or relative positioning, but absolute positioning and relative positioning.

Standard: Sub-parent (use absolute positioning for sub-elements and relative positioning for parent elements)