Relative and cssrelative in css Comprehension

Relative and cssrelative in css Comprehension

1. Restrictions of relative on absolute

1. Restrict left/top/right/bottom positioning. Absolute is in the upper left corner by default. When the parent class is set to relative, absolute is restricted to the parent class. When top/left/right/bottom is set, the starting point is the upper left corner of the parent class.

2. Restrict the z-index level. The two absolute in the page have different z-indexes and different levels. When both absolute's parent classes have relative, their hierarchy depends on the z-index of relative of the parent class.

3. restrict the effect under overflow. By default, overflow: hidden cannot restrict absolute. When relative is added, it can be restricted. When overflow: auto or overflow: scoll, there is a scroll bar in it, absolute does not move with the scroll bar. In this case, you need to add relative.

2. relative can only limit the z-index level of fixed

Iii. relative and positioning

1. Location and offset of relative are relative to their own locations.

2. relative positioning does not affect the positioning of other elements. Purpose: Use the custom drag and drop function.