CSS Position

為 Interview Bit 的第 24 題。

介紹

position 屬性用於元素的定位方法，再搭配使用 top、bottom、left 和 right 屬性定位。但是，除非首先設置了 position 屬性，否則 top、bottom、left 和 right 屬性將不起作用。

以下為 position 屬性值：

• position: static
• position: relative
• position: fixed
• position: absolute
• position: sticky

position: static

static 是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，position: static; 的元素不受 top 、 right 、 bottom 和 left 屬性影響。

position: relative

position: relative; 的元素設定 top 、 right 、 bottom 和 left 屬性即可使元素相對於原本元素該出現的位置進行定位。

而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。

範例

CodePen 範例

可以看到下面的 div 都是有加 .relative，表示相對於原本的位置，只要有加 .relative，都會向下移動 40px。

如果把 .relative 拿掉，表示沒有特別定位，元素就會回到原本的位置。

position: fixed

position: fixed的元素是相對於視窗定位，即使往下 scroll 或是往上 scroll，元素都同一位置，不會隨著滾動而有所改變。top 、 right 、 bottom 和 left 屬性可以表示將此元素定位在瀏覽器的某一個地方。

範例

CodePen 範例

可以看到範例，即便我是把要固定的元素放在文字裡面，我還是會相對於瀏覽器視窗做定位。

position: absolute

position: absolute; 的元素相對於最近的父元素進行定位。然而，如果絕對定位的元素沒有父元素，它將使用 HTML（body），並隨頁面滾動一起移動。

它有一個重要的限制條件：父元素不能是 position: static，否則定位點就會變成整個網頁的根元素 html。

另外，position: absolute; 也必須搭配top、bottom、left、right這四個屬性一起使用。

範例

CodePen 範例

  <div id="father">
    <div id="son"></div>
  </div>

#father {
  positon: relative;
  width: 400px;
  height: 400px;
  background-color: red;
}
#son {
  /*相對於父元素，往下 100px*/
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: green;
  width: 200px;
  height: 200px;
}

下圖為綠色元素原本的位置。

position: sticky

position: sticky; 的元素根據使用者的 scroll bar 位置進行定位。

position: sticky; 的元素是 position: relative 和 position: fixed 之間做切換。首先會先有 position: relative，但 scroll 到某一位置時，則該元素會變成 position: fixed，一直固定在 browser 的某一個位置。

範例

CodePen 範例

參考資料：
CSS 布局 - position 属性
學習 CSS 版面配置
CSS 定位詳解