The understanding of four kinds of positioning of CSS

Static

This is the default positioning method for the element, which appears in the normal document stream and takes up page space. You cannot use Top,bottom,left,right and Z-index. Relative

Relative positioning, relative to its parent element (regardless of how the parent element is positioned at this time), rather, it is positioned relative to the unoccupied space left by its parent element (as can be seen when the parent element is represented by multiple relative-positioned child elements), and it occupies the initial page space of the element in the document. That is, the location of the space occupied is not changed after using Top,bottom,left,right to move the position. You can use Z-index to move in the direction of the z axis. Absolute

Absolute positioning, out of the document stream, does not occupy the page space. Positioned as a reference to the most recent parent element that is not a static location, and if all of its parent elements are static positioned, the element is eventually positioned as a reference for the current window. You can use Top,bottom,left,right to move the position, or use Z-index to move over the z axis. When an element is positioned for this, if the element is an inline element, it becomes a block-level element, that is, it can set its width and height directly, and if the element is a block-level element, the width is changed from the original 100% to auto.

Note: When an element is set to absolute positioning, when the value of Top,bottom,left,right is not specified, their value is not 0, and these values have a default value, which is the position in the normal document flow before the element is set to absolute positioning. (Perhaps I did not describe it very clearly, suggest that you write an example to see the effect) Fixed

Absolute positioning method, directly to the browser window as a reference for positioning. Other characteristics with absolute positioning.