css understanding relative

1. The restrictive effect of relative on absolute

1. Restrict left/top/right/bottom positioning. Absolute defaults to the upper left corner of the parent class. When the parent class is set to relative, absolute is limited to the area of ​​the parent class. When setting top/left/right/bottom, the starting point is the upper left corner of the parent class

2. Limit the z-index level. The z-indexes of the two absolutes in the page are different and are not auto. They have their own levels. When the parent classes of these two absolutes have relative, their levels depend on the relative z-index of the parent class

3. Limit the effect under overflow. By default, overflow:hidden cannot restrict absolute. It can only be restricted when relative is added. When overflow:auto or overflow:scoll is used, there is a scroll bar inside, and absolute will not move with the scroll bar. This is You need to add relative

2. Relative can only limit the fixed z-index level

3. Relative and positioning

1. Relative’s positioning and offset are both It is relative to its own position

2. Relative positioning will not affect the positioning of other elements. Function: Can be used to customize the drag and drop function

4. The principle of relative minimization impact

refers to minimizing the potential impact of the relative attribute on other elements or layout

1 , Try to avoid using relative

2. When it must be used, relative should also be minimized

For more relative articles on css understanding, please pay attention to the PHP Chinese website!