CSS深入理解之relative 笔记

relative对absolute的限制作用

1. 限制 left/top/right/bottom 定位；
2. 限制 z-index 层级，以relative的z-index为准（不包括auto）；
3. 限制 absolute 不受overflow的影响的特性；

relative只能限制fixed定位的元素的z-index层级，其它都无法限制。

relative 定位特性

1. 相对自身进行定位；
2. 用来定位时，无侵入，不影响其它元素的布局；

relative定位同时设置了top和bottom时，top起作用；同时设置了left和right时，left起作用，和顺序无关。

relative 和 z-index 的层级关系

默认情况下，网页中重叠的元素，后面的会覆盖前面的，即使使用z-index。

给前面的元素添加属性position:relative之后，即使后面的元素使用z-index也无效。效果如下：

relative最小化影响原则

1. 尽量避免使用relative，直接使用absolute配合margin进行精确控制。例如：
   

   

2. relative最小化，针对定位元素提供单独的div设置relative。例如：