CSS3中的絕對定位是指元素在頁面上完全脫離所在文檔流,不受其他元素的影響,可以精確定位到指定的位置。
絕對定位的元素的位置是相對其父元素的位置確定的,因此需要在其父元素中設置position屬性的值為relative、absolute或fixed。
.parent { position: relative; } .child { position: absolute; top: 20px; left: 50px; }
在上述代碼中,.parent元素設置position: relative后,.child元素就可以通過設置top和left的值精確定位,并且不會受到其他元素的影響。
絕對定位還可以設置z-index屬性,用于調整元素在z軸上的層次關系,值越大越在上層。
.child { position: absolute; top: 20px; left: 50px; z-index: 1; }
除了父元素的定位方式外,絕對定位還可以參考其他元素的位置,這時需要設置position: absolute和top、right、bottom、left四個屬性中的至少兩個。
.child { position: absolute; top: auto; right: 50px; bottom: 20px; left: auto; }
上述代碼中,.child元素參考了其祖先元素的位置,并且定位到距其父元素右邊50像素、底部20像素的位置。
總的來說,CSS3中的絕對定位是一種非常靈活、精細的定位方式,可以在頁面布局中發揮重要作用。
上一篇css3 背景顏色一半
下一篇css3固定在底部