About the relative feature in CSS

Let’s talk about its own characteristics:

1. ## The positioning of left, right, top and bottom are all relative to their own position Positioning

2. When left and right exist at the same time, left will take effect

3. When top and bottom exist at the same time The existence of top takes effect

4. No intrusion, retains the original position, and will not affect the layout of other elements

5. Can be used in "Custom Drag and Drop"

Understand the relationship between relative and absoulte:

1. relative elements will restrict the left, right, top, and bottom positioning of internal absolute elements

2. ##relative elements will restrict internal The z-index level of the absoulte element

3. relative element will limit the inner absoulte element that can be set by the overflow element

Understand the relationship between relative and fixed :

##The relative element will limit the z-index level of the internal fixed element

Understand the relationship between relative and z-index

:

Settings Relative elements will increase the cascading context
When z-index is auto relative elements, the hierarchy of internal absoulte elements will not be restricted
When z-index is a numerical value, a stacking context will be created, so that the stacked numerical size of the two relative elements is compared, rather than the comparison of internal elements.

Usage Note

:

Try to avoid using the relative attribute
If used, try to narrow the control area to only include the internal elements to be restricted

The above is the detailed content of About the relative feature in CSS. For more information, please follow other related articles on the PHP Chinese website!