絕對定位是一種CSS定位屬性,它的作用是將元素相對于其父元素的位置進行定位,不受文檔流的影響。
/* 基本語法 */ position: absolute; top: 0; left: 0;
上述代碼是絕對定位的基本語法,其中position: absolute;
表明該元素采用絕對定位;top: 0;
和left: 0;
分別表示元素距離其父元素的頂部和左側位置為 0。
由于絕對定位是相對于其父元素定位的,因此需要該元素的父元素采用非靜態定位(即position
屬性值為relative、absolute
或fixed
)。
/* 父元素的定位 */ .parent { position: relative; } /* 子元素的定位 */ .child { position: absolute; top: 20px; left: 20px; }
上述代碼中,.parent
元素采用相對定位,使其成為.child
元素的定位參照點,.child
元素采用絕對定位,在距離父元素頂部和左側均為 20px 的位置上定位。
需要注意的是,使用絕對定位后,元素的寬高以及位置不再受文檔流的影響,因此在使用時需謹慎處理,避免出現樣式與布局混亂的問題。
上一篇css制作新聞網頁
下一篇給頁面加背景圖片css