本文目錄導(dǎo)讀：

1. 理解CSS定位
2. 使用fixed定位
3. 使用absolute定位

CSS技巧：定位并固定一個div元素

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要固定某些元素的位置，以便在用戶瀏覽頁面時，這些元素始終保持可見，本文將介紹如何使用CSS來定位并固定一個div元素。

理解CSS定位

在CSS中，我們可以通過設(shè)置元素的position屬性來控制其位置，position屬性有四個值：static、relative、fixed和absolute，要固定一個元素的位置，我們通常使用fixed或absolute定位。

使用fixed定位

fixed定位會使元素相對于瀏覽器窗口進行定位，即使頁面滾動，它也會始終保持在同一位置，以下是一個簡單的例子：

#myDiv {
  position: fixed;
  top: 50px;  /* 距離頁面頂部的距離 */
  left: 100px; /* 距離頁面左側(cè)的距離 */
}

在這個例子中，myDiv元素會被固定在距離頁面頂部50px、左側(cè)100px的位置。

使用absolute定位

absolute定位的元素相對于***近的已定位的祖先元素（position屬性非static的元素）進行定位，如果沒有已定位的祖先元素，那么它會相對于初始包含塊進行定位，以下是一個例子：

#myDiv {
  position: absolute;
  top: 50px;
  left: 100px;
}

在這個例子中，myDiv元素會被固定在距離其***近的已定位祖先元素的頂部50px、左側(cè)100px的位置，如果沒有已定位的祖先元素，它會相對于頁面的初始包含塊進行定位。

通過理解CSS的定位屬性，我們可以輕松地使用fixed或absolute定位來固定一個div元素的位置，在實際應(yīng)用中，我們可以根據(jù)具體的需求和場景選擇使用哪種定位方式。