CSS 絕對定位是一種可以讓元素脫離文檔流,相對于父元素或根元素進行定位的屬性。相比于相對定位和固定定位,絕對定位有一個很大的特點就是不占用空間。
所謂"不占用空間"指的是絕對定位的元素對于其他元素沒有任何影響,其他元素不會考慮到它的存在,即使它的位置遮擋了其他元素也不會影響其他元素的位置。
絕對定位實現的方法也非常簡單,使用position:absolute;
屬性來進行指定。在使用絕對定位時,為了更好的定位效果,通常還需要設置left
,top
,right
,bottom
等屬性來指定元素相對于其父元素或根元素的位置。
.box{ position: absolute; left: 100px; top: 50px; } .parent{ position: relative; }
在上述代碼中,.box
元素使用了絕對定位,并且通過left
和top
屬性將其相對于其父元素定位。而父元素通過設置position:relative;
屬性來提供.box
元素的定位參考系。
需要注意的是,絕對定位的元素會優先顯示在其他元素之上,因此如果需要將其遮擋在其他元素下面,可以使用z-index
屬性進行指定。
.box1{ position: absolute; left: 100px; top: 50px; z-index: 1; } .box2{ position: absolute; left: 120px; top: 70px; z-index: 2; } .parent{ position: relative; }
在上述代碼中,.box2
元素的z-index
屬性為2,將其置于.box1
元素之上。而父元素仍然提供了定位參考系。
總之,CSS 絕對定位可以讓元素脫離文檔流,不影響其他元素的布局,并且可以通過設置位置及z-index
屬性來實現更精確的定位效果。