相對定位(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)定位系列（四）