1.定位的定義
-
static
(靜態(tài)) 沒有特別的設(shè)定秆乳,遵循基本的定位規(guī)定懦鼠,不能通過z-index
進行層次分級。 -
relative
(相對定位) 對象不脫離文檔流屹堰,參考自身靜態(tài)位置通過top
bottom
left
right
定位肛冶,并且可以通過z-index
進行層次分級。 -
absolute
(絕對定位) 脫離文檔流扯键,通過top
bottom
left
right
(簡稱TRBL)定位睦袖。選取其最近一個最有定位設(shè)置的父級對象進行絕對定位,如果對象的父級沒有設(shè)置定位屬性荣刑,absolute
元素將以body
坐標(biāo)原點進行定位馅笙,可以通過z-index
進行層次分級。 -
fixed
(固定定位) 這里所固定的參照對像是可視窗口而并非是body
或是父級元素厉亏,可通過z-index進行層次分級董习。
2.相對定位(使元素位移)
當(dāng)我們給對象1設(shè)置了相對定位及TRBL以后,該對象出現(xiàn)以下變化:
- 提高層疊級別(
z-index
增加)爱只,高于文本流阱飘; - 相對原位置A點向右位移left大小的距離;
- 相對原位置A點向下位移top大小的距離;
- 保留原來的位置沥匈。
結(jié)果:原來的默認(rèn)定位對象2位置不變蔗喂,對象1覆蓋了對象2的內(nèi)容、可以看出高帖,相對定位會保留原始位置缰儿,即對象1內(nèi)容脫離文檔流,但是位置不會脫離文檔流散址」哉螅可以理解為對象1雖然搬家了,但是老家的房子沒有賣掉预麸,依然在瞪浸。
相對定位
3.絕對定位(定位到任意位置)
如果說相對定位是搬家不賣房,那么絕對定位是搬了家以后把原來的房子賣掉了吏祸。完全脫離文檔流成為自由體对蒲。
當(dāng)我們給對象1設(shè)置了絕對定位及TRBL以后,該對象出現(xiàn)以下變化:
- 提高層疊級別(
z-index
增加)贡翘,高于文本流蹈矮; - 相對原位置A點向右位移left大小的距離;
- 相對原位置A點向下位移top大小的距離鸣驱。
- 刪除原來位置泛鸟。
結(jié)果:對象1絕對定位移動后讓出了原來的位置,原來的默認(rèn)定位對象2位置上移踊东。
絕對定位
參考資料:詳解定位與定位應(yīng)用