CSS定位是指通過設置元素的位置屬性,將元素放置在網頁中的指定位置上。實現定位需要掌握以下幾種屬性:
position: 定位方式(常用的有relative、absolute、fixed、sticky) top: 元素頂部與父元素頂部或文檔頂部的距離 bottom: 元素底部與父元素底部或文檔底部的距離 left: 元素左側與父元素左側或文檔左側的距離 right: 元素右側與父元素右側或文檔右側的距離
相對定位是指元素相對于其原本的位置進行定位。例如:
div { position: relative; left: 50px; top: 50px; }
這段代碼會將一個 div 元素相對于原本位置向右下方移動50像素。
絕對定位是指元素相對于其最近的已經定位(position不為static)的父元素進行定位。例如:
.parent { position: relative; } .child { position: absolute; top: 50px; left: 50px; }
這段代碼會將一個子元素 .child 相對于其 父元素 .parent 進行定位,距離父元素頂部和左側均為50像素。
固定定位是指元素相對于瀏覽器窗口進行定位。例如:
.element { position: fixed; top: 0; left: 0; }
這段代碼會將一個 .element 元素固定在窗口的左上角。
粘性定位是指元素在滾動過程中會保持它本身的位置。它是相對定位和固定定位的混合。例如:
.element { position: sticky; top: 50px; }
這段代碼會將一個 .element 元素,當滾動條滾動到距離頁面頂部50像素的位置時,元素開始固定在該位置。
以上是CSS中常用的定位方式,通過靈活使用,可以將元素實現各種各樣的效果。
下一篇css如何定義