相对定位(Relative positioning)

当一个盒根据常规流或者浮动摆放好后，它可能会相对于该位置移动，这叫相对定位。

相对定位的盒保持它在常规流中的大小，包括换行和空格都会原样保留

relative与absolute,fixed

relative与absolute的关系

在例1中,absolute元素的top/left:0的定位在浏览器窗口的左上角,而设置了relative父元素的absolute元素的top/left:0在relative元素的左上角
在例2中,relative元素与absolute元素同级的时候,z-index:2,后面的覆盖前面的元素.当relative元素与absolute元素嵌套时,relative元素的z-index决定层叠顺序,absolute元素z-index失效
在例3中,普通div元素设置的overflow:hidden对于子元素是absolute的元素无效,而设置relative的div元素设置overflow:hidden可以在子元素absolute中生效

也就是说relative可以:

• 限制left/top/right/bottom定位

• 限制z-index层级

• 限制在overflow下失效的问题

而对于fixed,relative只能限制z-index层级

relative与定位

relative与自身的定位

在例1中,设置left/top:0后,relative元素不会发生任何变化,而设置了left/top:100px后,元素相对于它本身向右和向下分别偏移了100px

在例2中,第二个图片position: relative;left: -999em;,虽然它看不见了,但是它的位置保留了下来

在例3中,一个relative元素同时设置top/bottom:100px或者left/right:100px,起作用的是left:100px,top:100px

relative与z-index

relative与z-index关系

在例1中,设置了relative的元素层级要比普通元素高
在例2中,relative元素与absolute元素同级的时候,z-index:2,后面的覆盖前面的元素.当relative元素与absolute元素嵌套时,relative元素的z-index决定层叠顺序,absolute元素z-index失效
在例3中,z-index:auto比z-index:1优先级小,至于子元素的重叠,需要计算子元素的z-order决定

relative最小化影响原则

1. 在可以单独使用absolute解决问题的时候,不要使用relative,如有偏差,可以配合margin使用

2. 一定要使用relative的时候,要保证作用范围最小化

relative相关参考
CSS 相对/绝对(relative/absolute)定位系列（四）