相对定位relative

Posted 2020-08-10

今天看了慕课网课程CSS深入理解之relative，进行总结

首先相对定位relative对absolute有限制

1.限制absolute的定位

   使用relative定位的元素使其absolute子元素，相对于此relative元素定位

2.限制层级

  使用relative定位的元素的z-index层级越高，则其absolute子元素层级越高

  <div relative z-index=3 > <div absolute z-index=1 id=z1></div>  </div>

  <div relative z-index=2 > <div absolute z-index=3 id=z3></div>  </div>

z3的层级要比z1小，因为z1的父元素层级大

3.限制overflow

   overflow:hidden；absolute元素超出不会隐藏，父元素添加relative定位，absolute会被限制，会隐藏

相对定位relative对absolute只有层级限制

相对定位的定位特点：

1.相对自身位置进行定位

2.无侵入

relative元素不会脱离文档流，即使进行了定位，文档流中原本所占位置仍然占用，不会被后面的元素侵入