On the position usage of css, cssposition

On the position usage of css, cssposition

In css, the position attribute has four values available: static (default), absolute, relative, and fixed.

Relative: relative positioning (relative to its position in the conventional stream, retain its original position)

Absolite:

1. Positioning of its own contained blocks;
2. Search for inclusion block rules: Search for ancestor elements from the Internet, and find the inner margin boundary of the First Ancestor element whose position is not static modified is the inclusion block of the current absolute positioning element; if not, it is located relative to html;
3. Completely out of the document stream;
4. Change the value of display to inline-block;
5. Do not shorten the row box

Fixed:

The only difference between a file stream and absolute is that the absolute element determines the location based on the latest positioning context, while fixed always determines the Location Based on the browser. It does not move even if the window is rolling.

Speaking of position, let's talk about [Z-index] (vertical positioning)

The default value of Z-index is 0. In this case, the latter will overwrite the former. To change the hierarchical relationship between elements, you must change the Z-index value, the higher the Z-index value, the higher the priority.