CSS 中有五種常見的定位方式，它們是：

1. 靜態(tài)定位（Static）：元素的默認(rèn)定位方式。在靜態(tài)定位下，元素根據(jù)正常文檔流進(jìn)行布局，并不受到 top、left、bottom、right 等屬性的影響。

HTML:

<div class="static-element">
  這是靜態(tài)定位的元素。
</div>

CSS:

.static-element {
  position: static;
}

?

2. 相對(duì)定位（Relative）：通過設(shè)置元素的位置屬性（如 top、left、bottom、right）來相對(duì)于其在正常文檔流中的位置進(jìn)行定位。相對(duì)定位會(huì)保留元素在文檔流中的空間，并可以通過偏移值來調(diào)整元素的位置。

HTML:

<div class="relative-container">
  <div class="relative-element">
    這是相對(duì)定位的元素。
  </div>
</div>

CSS:

.relative-container {
  position: relative;
}

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

3. 絕對(duì)定位（Absolute）：通過設(shè)置元素的位置屬性（如 top、left、bottom、right）來相對(duì)于其最近的具有定位（position 屬性為 relative、absolute、fixed 或 sticky）的祖先元素進(jìn)行定位。絕對(duì)定位會(huì)脫離文檔流，并且不會(huì)在布局中占用空間。

HTML:

<div class="absolute-container">
  <div class="absolute-element">
    這是絕對(duì)定位的元素。
  </div>
</div>

CSS:

.absolute-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.absolute-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 固定定位（Fixed）：與絕對(duì)定位類似，但相對(duì)于瀏覽器窗口或包含框的位置進(jìn)行定位，而不是相對(duì)于父級(jí)元素。固定定位的元素在滾動(dòng)頁面時(shí)會(huì)保持在視圖的固定位置。

HTML:

<div class="fixed-element">
  這是固定定位的元素。
</div>

CSS:

.fixed-element {
  position: fixed;
  top: 0;
  right: 0;
}

5. 粘性定位（Sticky）：粘性定位結(jié)合了相對(duì)定位和固定定位的特性。元素根據(jù)正常文檔流進(jìn)行布局，但當(dāng)滾動(dòng)到預(yù)定的閾值位置時(shí)會(huì)變?yōu)楣潭ǘㄎ唬３衷谝晥D中的特定位置。

HTML:

<div class="sticky-element">
  這是粘性定位的元素。
</div>

CSS:

.sticky-element {
  position: sticky;
  top: 20px;
}

這些定位方式可以通過 CSS 的 `position` 屬性來設(shè)置，并配合使用 `top`、`left`、`bottom`、`right` 等屬性調(diào)整元素的位置。