CSS中,可以使用position
屬性來讓盒子脫離文檔流。position
屬性有四種值:static
、relative
、absolute
和fixed
。absolute
和fixed
可以讓盒子脫離文檔流,而relative
則可以讓盒子相對于其正常位置進行偏移,但不脫離文檔流。
當position
屬性值為absolute
時,盒子會被定位到其***近的非static祖先元素的左上角,如果沒有這樣的祖先元素,則會定位到文檔的左上角,盒子會脫離文檔流,不受其他元素的影響。
而當position
屬性值為fixed
時,盒子會被定位到瀏覽器窗口的左上角,不受頁面滾動的影響,同樣,盒子也會脫離文檔流。
需要注意的是,使用position: absolute;
或position: fixed;
時,盒子的寬度和高度如果沒有設(shè)置,將會根據(jù)內(nèi)容自動調(diào)整,如果需要固定寬度和高度,可以使用CSS的width和height屬性進行設(shè)置。
使用position屬性時,還需要注意z-index屬性的設(shè)置,z-index屬性用于設(shè)置元素的堆疊順序,即哪個元素應(yīng)該顯示在另一個元素的上方,如果沒有設(shè)置z-index屬性,則元素的堆疊順序?qū)凑账鼈冊谖臋n中的順序排列。