The position attribute in the CSS style sheet

In CSS, the content about position positioning is:
Position: relative | absolute | static | fixed

 

Static(Static) No special settings, follow the basic positioning rules, and do not use Z-index for hierarchical classification.

 

Relative(Relative positioning) objects cannot be stacked and are not separated from the document stream. You can locate objects through top, bottom, left, and right based on their static locations, and perform hierarchical classification using Z-index.

 

Absolute(Absolute positioning) the object is separated from the document stream and located through top, bottom, left, right. Select the most recent parent-level object with the positioning settings for absolute positioning. If the parent-level object does not set the positioning attribute, the absolute element will be located at the origin of the body coordinate, you can perform hierarchical classification using Z-index.

 

Fixed(Fixed positioning) Here, the fixed reference object is like a visual window, not a body or a parent element. You can perform hierarchical classification using Z-index.

Cascading classification in CSS: Z-index: auto | namber;
Auto follows the positioning of its parent object
Namber has no integer unit. Negative

Relative)You can only move the text stream between the top, bottom, and left. Although his performance zone is out of the text stream, he still keeps a place in the text stream, this is like a working employee who has arrived in another place, but he still has a dedicated location in his hometown, which does not change with his move. This clearly leaves a blank space. If you want the text stream to discard this part, you need to use absolute positioning.

 

Absolute (absolute positioning)Not only does it break away from text streams, but it does not leave exclusive spaces for this absolute positioning element in text streams. This is like a job in a factory. If a worker leaves, it will naturally ask another worker to fill the position. The moving part naturally becomes a free body. You can use trbl (top, right, bottom, and left (trbl) to set the element to any position. When the position attribute of the parent layer is the default value, the coordinate origin of trbl starts with the coordinate origin of the body.