首页 > 代码库 > 相对定位relative

相对定位relative

今天看了慕课网课程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元素不会脱离文档流,即使进行了定位,文档流中原本所占位置仍然占用,不会被后面的元素侵入

 

相对定位relative