CSS 中的 position 屬性用來設(shè)置元素的定位方式。

position 的值有 static、relative、absolute、fixed 和 sticky，默認值為 static，position 值為 relative、absolute、fixed 或 sticky 的元素成為定位元素，top、right、bottom 和 left 屬性為被定位元素指定位置。

static

position 屬性值為 static 的元素使用正常的布局行為，top、right、bottom、left 和 z-index 屬性無效。

relative

position 屬性值為 relative 的元素被稱為相對定位元素。相對定位元素相對于未設(shè)置 position 屬性為 relative 時該元素的位置進行定位。其位置調(diào)整是在不改變頁面布局的前提下調(diào)整的，也就是說其原始位置會留下空白。

absolute

position 屬性值為 absolute 的元素被稱為絕對定位元素。絕對定位元素相對于最近的非 static 祖先元素進行定位，如果不存在這樣的祖先元素，則相對于根元素進行定位。與相對定位元素不同的是，絕對定位元素脫離了文檔流，在文檔流中不占據(jù)空間。

注意，如果同時指定了 top 和 bottom（非 auto），優(yōu)先采用 top；如果同時指定了 left 和 right，優(yōu)先采用 left。

fixed

position 屬性值為 fixed 的元素被稱為固定定位元素。固定定位元素相對于瀏覽器窗口進行定位，其位置不隨頁面滾動而發(fā)生變化。與絕對定位元素相同，固定定位元素也脫離了文檔流，在文檔流中不占據(jù)空間。

sticky

IE 和 Edge 瀏覽器不支持此屬性值！

position 屬性值為 sticky 的元素被稱為粘性定位元素。粘性定位是相對定位和固定定位的混合，元素在跨越特定閾值前為相對定位，之后為固定定位。例如下面代碼中的 box 元素，它在距離瀏覽器窗口上邊距離大于 20px 時為相對定位，隨著頁面的滾動而滾動，當距離等于 20px 后，就會變?yōu)楣潭ǘㄎ?，其位置將不會繼續(xù)隨著頁面滾動而變化。

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: sticky;
  top: 20px;
}

注意，只有指定了 top、right、bottom 或 left 其中之一，粘性定位才會生效，否則和相對定位效果相同。