CSS之 relative 特性

1. 自身特性:

  如left,right,top,bottom定位都是相对于自身位置定位。
  当left与right同时存在,lfet生效。
  当top与bottom同时存在,top生效。
  无侵入,保留原始位置,不会影响其他元素的布局。
  可运用于《自定义拖拽》场景。

2. relative与absolute的关系

  起到限制作用:
  限制内部absolut元素的left/right/top/bottom定位
  限制内部absolut元素的z-index层级
  限制内部absolut元素的可被overflow溢出隐藏

3. relative与absolute的关系:

  只能限制内部fixed元素的z-index层级

4. relative与z-index的关系:

  设置relative元素,可以提高层叠上下文
  当z-index为auto的relative,则不限制内部absoulte元素的层级
  当z-index为数值时,则会创建层叠上下文,从而比较的是两个relative元素的层叠数值大小,
  而不是内部元素的比较。

5. 使用原则:

  尽量避免使用elative
  如使用,尽量缩小控制区域,减少到只包含要限制的内部元素