3.17-pai-ban-guan-wu-ding-wei-position.md

3.19 排版 - 關於定位(position)

一個元素，在版面中的位置，就叫做定位，有幾種基本的定位型態，可設定的值有：

• static：這是所有元素的預設值。
• fixed：固定定位，相對於螢幕。
• relative：相對定位。相對於自己原來的位置。
• absolute：絕對定位。一直往父元素找，直到找到第一個 非 static 的元素，那就相對於它來定位。
• sticky：假設搭配 top: 0; ，螢幕上方未碰觸到該元素時，會在原位置；碰觸到時，置頂。而置頂的期間，取決於父元素高度範圍。

固定定位：fixed

不論使用者滑動到頁面的哪個區域， fixed 元素都會固定在螢幕的指定位置，需搭配 top、right、bottom、left 四個屬性，來決定要固定在哪個位置。例：

部份 HTML：

<p>段落</p>
<p class="the_fixed">fixed 段落</p>
<p>段落</p>

CSS：

p.the_fixed{
  border:1px solid red;
  margin:0;
  padding:0;

  /* 改變定位模式(fixed) */
  position: fixed;
  right:0;
  top:0;
}

結果：

範例：

{% embed url="https://codepen.io/carlos411/pen/yLBPdoG" %}

相對定位：relative

相對於自己原來的位置，該如何位移，一樣搭配 top、right、bottom、left。有以下兩個特性：

• 元素位移之後，不影響周圍的元素。
• 元素位移之後，若超出螢幕，會造成頁面上出現水平捲軸。

範例：

{% embed url="https://codepen.io/carlos411/pen/LYPOKzG" %}

絕對定位：absolute

當一個元素設定成 absolute 的定位模式，就會一直往父層找，直到「找到第一個父元素，其 position 的定位模式不是預設的 static 即可，即相對於它來做定位」。例：

HTML：

<p>段落</p>
<div class="relative_block">
  這是 relative 的區塊
  <p class="the_absolute">absolute 段落</p>
</div>
<p>段落</p>
<p>段落</p>

CSS：

div.relative_block{
  position: relative;
  border:1px solid black;
  width: 300px;
  height: 300px;
}
p.the_absolute{
  border:1px solid red;
  margin:0;

  position: absolute;
  bottom: 10px;
  right:10px;
}

結果：

範例：

{% embed url="https://codepen.io/carlos411/pen/aboVgVb" %}

sticky 定位模式

當一個元素 position 設定成 sticky 之後，通常會再搭配 top 屬性(也可以是其它的 right、bottom、left，但 top 較常用)，來決定當螢幕的上方，距離元素上方多少距離時，就定住。例：

{% embed url="https://codepen.io/carlos411/pen/PoqbLrE" %}

關於 z-index

元素當中如果在同一層，定位上有重疊的狀態，可以使用 z-index ，設定正整數來決定元素的疊層順序。愈大的值，代表會出現在愈上方。

例：

{% embed url="https://codepen.io/carlos411/pen/JjeQjdB" %}

練習

提供 html 如下：

<div class="pic_item">
  <a href="#" class="pic_link" target="_blank">
    <img src="https://picsum.photos/id/211/800/400">
  </a>
  <span class="-hot">熱門</span>
  <div class="item_desc">這是圖片描述</div>
</div>

練習加上 CSS 後，呈現結果如下：

參考作法：

{% embed url="https://codepen.io/carlos411/pen/Xvxzvw" %}