CSS中通過指定position屬性的值可以實現不同的定位方式，一共有static、relative、absolute、fixed等等。下面就詳細介紹幾種定位方式的區別。

static定位

static是position屬性的預設值。如果省略position屬性，瀏覽器就認為該元素是static定位。
這時，瀏覽器會按照原始碼的順序，決定每個元素的位置，這稱為"正常的頁面流"（normal flow）。每個塊級元素佔據自己的區塊（block），元素與元素之間不產生重疊，這個位置就是元素的預設位置。
Attention：static定位的元素，使用top、bottom、left、right這四個屬性無效。

relative、absolute、fixed這三個屬性值有一個共同點，都是相對於某個基點的定位，不同之處僅僅在於基點不同。如果理解了這三種定位方式的基點的位置，就可以掌握這三種定位方式了。

relative定位

定位是相對於預設位置（即static時的位置）進行偏移（設定偏移量的時候，會相對於預設所在的位置偏移）。設定了relative的元素仍然處在文件流中，元素的寬高不變，設定偏移量也不會影響其他元素的位置。最外層容器設定為relative定位，在沒有設定寬度的情況下，寬度是整個瀏覽器的寬度。相對定位元素經常被用來作為絕對定位元素的容器塊。

必須搭配偏移量進行使用。

div{
    position:relative;
    top:50px;
    left:0px;
}
 

absolute定位

定位是相對於離元素最近的設定了絕對或相對定位的父元素決定的，如果沒有父元素設定絕對或相對定位，則元素相對於根元素即html元素定位。設定了absolute的元素脫離了文件流，元素在沒有設定寬度的情況下，寬度由元素裡面的內容決定。脫離後原來的位置相當於是空的，下面的元素會來佔據位置。

div{
    position:absolute;
    top:50px;
    left:0px;
}

fixed定位

相對於瀏覽器視窗進行偏移，即定位基點是瀏覽器視窗。這會導致元素的位置不隨頁面滾動而變化，好像固定在網頁上一樣。

它如果搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基於瀏覽器視窗計算的，否則初始位置就是元素的預設位置。

div{
    position:fixed;
    top:50px;
}

sticky定位

基於使用者的滾動位置定位，它會產生動態效果，很像relative和fixed的結合：一些時候是relative定位（定位基點是自身預設位置），另一些時候自動變成fixed定位（定位基點是瀏覽器視窗）。
這種定位方式可以形成“動態固定”的效果，初始載入時是relative的定位方式，當頁面滾動超出設定的閾值時，便會切換為fixed定位，固定在頁面上。元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使sticky定位生效。否則其行為與相對定位相同。

#toolbar {
  position: -webkit-sticky; /* safari 瀏覽器 */
  position: sticky; /* 其他瀏覽器 */
  top: 20px;
}