CSS里固定位置怎么用

在CSS中，我們可以使用position屬性來固定一個元素的位置，position屬性有以下幾個值：static、relative、absolute、fixed和sticky。

1、static：這是默認(rèn)值，元素按照正常的文檔流進(jìn)行排列。

2、relative：元素按照正常的文檔流進(jìn)行排列，但可以通過top、right、bottom和left屬性進(jìn)行微調(diào)。

3、absolute：元素脫離正常的文檔流，通過top、right、bottom和left屬性進(jìn)行定位。

4、fixed：元素脫離正常的文檔流，通過top、right、bottom和left屬性進(jìn)行定位，并且位置固定，不會隨著頁面的滾動而改變。

5、sticky：元素在滾動到某個位置之前，按照正常的文檔流進(jìn)行排列，一旦滾動到某個位置，就會固定在那個位置。

我們可以通過以下示例來演示如何使用position屬性來固定一個元素的位置：

HTML代碼：

<div id="myDiv">我是一個div元素</div>

CSS代碼：

#myDiv {
  position: fixed;
  top: 10px;
  left: 10px;
}

在這個例子中，我們將id為myDiv的div元素的position屬性設(shè)置為fixed，然后通過top和left屬性將其定位到距離頁面頂部和左側(cè)都是10px的位置，這樣，無論頁面如何滾動，這個div元素都會固定在距離頁面頂部和左側(cè)都是10px的位置。