深入理解relative

该文章总结自张鑫旭慕课，以及自己的使用经验和建议。

relative的具体作用

• relative限制absolute

  • 限制偏移（绝对定位根据相对定位元素进行偏移）
  • 与overflow: hidden截断隐藏超出部分（如果没有relative的overfloww:hidden对于绝对定位的元素失效）
  • relative会影响本身有z-index属性的绝对定位元素（如果a元素的z-index: 1;,b元素的z-index：3；，此时a在b下面，假如a的父元素有[relative]的z-index: 3，而b父元素有[relative]的z-index：2，不管a和b元素的z-index如何，a元素始终高于b元素。）

• relative与定位

  • 相对自身定位
  • 无侵入，不影响文档流(跟margin比较一下)
  • top下bottom失效，left下right失效
  • 设置relative元素的图片会盖过没有设置relative的图片（用margin-left: -xxpx试一下就知道了）

• 新建层叠上下文与层级控制

  上面讲的relative影响层级情况就是新建层叠上下文的原因，又在上面的基础上衍生出这些情况。

  • 如果b元素的带有relative的父元素的Z-index设置为auto时，此时父元素的relative不再对子元素的z-index有限制作用，所以此时b的z-index变成3（层叠上下文不存在），此时b便会超过a
  • 但是这种情况不限于ie6&ie7，因为ie6&ie7的z-index: auto也会出现新建层叠上下文，此时也就是说a依旧是比b高的。（这是bug）

应用

为了避免relative覆盖，有下面两个经验应用

• 避免使用relative（绝对定位不依赖于relative，具体看绝对定位一节）

• relative 最小化
  把img定位在左上角,一般的做法是

    <div style="position: relative;">
        <img style="position: absolute; top: 0;left: 0;">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
  

  这里会出现的问题就是很可能会因为父级的relative出现层级覆盖。

  现在可以这样子做：

  <div>
      <div style="position: relative;">
          <img style="position: absolute; top: 0;left: 0;">
      </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>
  

  以上， 便是实现relative最小化，这里面的div进行相对定位以后并不会对布局造成任何影响。