D11 - CSS - 佈局基本 - position - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 11

Modern Web

GPT 救救我！菜雞小海獺的前端成長之旅系列第 11 篇

D11 - CSS - 佈局基本 - position

15th鐵人賽

CatBoxy

團隊哥布林殺手

2023-09-12 00:05:26

341 瀏覽

分享至

簡介

position 是用來決定元素在網頁中如何定位的一種屬性，使用 top、bottom、left、right 的值來控制最終的位置。常見的例子如固定在頁首的導覽列（navbar）、頁尾的 footer，或者是一顆按了就可以回到頁面頂端的按鈕，它們的位置都是用 position 處理後的結果。~~（還有討厭的廣告）~~

Fig. 1. 固定在頂端的導覽列，MDN

Fig. 2. w3s 偷偷放在右下角的綠色小方塊XD，W3Schools

怎麼使用？

對元素設 position，再選用適合的值。
通則：有設 position 的會蓋掉沒設的、後設的會蓋掉之前已設的

position: static
- 預設值，即標準佈局（nomal layout）。
- 元素們會依自身的性質（block 或 inline ）一個個乖乖排好。
- top、bottom、left、right、z-index 此時無效。
position: relative
- 下了此關鍵字，元素在原本 layout 中的位置會被保留，再以此空間做 top、bottom、left、right、z-index 的調整。
- 對 table 家族的屬性無用。
position: absolute
- 元素會被獨立在 normal layout 之外、自成一國，不會保留在原本 layout 中的位置。
- 任何距離的設定都會以最近的、且已定位的父層元素為主。
- 絕對定位元素的外邊距（margin）不會跟其他元素的外邊距重疊
position: fixed
- 和 absloute 一樣，元素被獨立出來，不存在於 normal layout 中、原有空間也不被保留。
- 藉指定與 viewport 的各種相對數值，使元素固定在頁面上的特定位置。
- 不隨頁面滾動而移動
position: sticky
- 元素會正常存在於 normal layout 中，如一般元素一樣佔據一個空間，也會影響其他元素的排列
- 頁面滾動時，會依其屬性值（ top、bottom、left、right）選擇最近的可滾動元素的父層來定位。白話就是，（滾動頁面時）遇到具滾動機制的父／祖先層元素就會自己黏上去（定位）。
- sticky 元素不會影響其他元素的位置。當 sticky 元素停止不動時，其他的元素會遞補上 sticky 留下的空間。

用動圖做結尾吧

Fig. 3. 示意用 gif

static：毫無動靜，就只是個 static
relative：偏離原本位置
absloute
- 找不到自己定位的 absloute：找最外層視窗當爸
- 一個跑到最上面 top: 50px
- 另一個跑到左邊了 left: 50px
relative+absloute：比較好控制方向惹（好像也是標配組合XD?）
fixed：
- 定位在視窗上，不隨畫面滾動而變更 top: 20px;
sticky：不跟著畫面移動，待回到原位才黏住。~~（該下車惹？）~~

喔耶寫完好開心！
第一次用動圖也好開心XD
~~絕對不會是因為被 flex 跟 grid 虐翻才跑來寫被我遺忘的 position 的XD~~

明天的主題是基本的 display。
基本的 display 結束後，會先談基本 JS。
待基本系列都結束後，就是進階囉~~
邊寫邊彈性滾動，不然會斷尾XD"

以下附 code

<h1>position</h1>
<!-- 預設值 -->
<div class="box">
  <h2><code>position: static</code></h2>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="box test-relative">
  <h2><code>position: relative</code></h2>
  <div class="a">A</div>
  <div class="b"><code>left: 50px;</code></div>
  <div class="c"><code>right: -50px;</code></div>
  <div class="d"><code>bottom: 50px;</code></div>
</div>
<div class="box test-absolute">
  <h2><code>position: absolute</code></h2>
  <p>外層沒定位，會把視窗當爸來定位自己</p>
  <div class="a">A</div>
  <div class="b">absolute：<code>left: 50px;</code></div>
  <div class="c">C</div>
  <div class="d">absolute：<code>top: 50px;</code></div>
</div>
<div class="box test-absolute-relative">
  <h2>relative+absolute</h2>
  <p>外：<code>position: relative</code></p>
  <p>內：<code>position: absolute</code></p>
  <div class="a">A</div>
  <div class="b"><code>left: 50px;</code></div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="box test-fixed">
  <h2><code>position: fixed</code></h2>
  <div class="a">A</div>
  <div class="b">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet in soluta necessitatibus, blanditiis
      rem unde provident! Consequuntur deserunt facere beata</p>
    <code>position: fixed; top: 20px;</code>
  </div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="box test-sticky">
  <h2><code>position: sticky</code></h2>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="box">
  <h2>我是空的</h2>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

/* 通用樣式 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 1rem 2rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.5rem;
}

p,
span,
button {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.box {
  width: 600px;
  border: 1px solid black;
  margin: 20px auto;
  font-size: 2rem;
}

.a {
  background-color: #faa;
}

.b {
  background-color: #afa;
}

.c {
  background-color: #aaf;
}

.d {
  background-color: #fa3;
}

.e {
  background-color: #3af;
}

.f {
  background-color: #a3f;
}

/* 以下開始 */
div {
  padding: 10px;
  margin: 10px;
}

p {
  margin-top: 10px;
}

.box {
  width: 500px;
  margin-bottom: 3rem;
  padding: 1.5rem;
}

/* test-relative */
.test-relative div:nth-of-type(2) {
  position: relative;
  left: 50px;
}

.test-relative div:nth-of-type(3) {
  position: relative;
  right: -50px;
}

.test-relative div:nth-of-type(4) {
  position: relative;
  bottom: 50px;
  z-index: -1;
}

/* test-absolute */
.test-absolute div:nth-of-type(2) {
  position: absolute;
  left: 50px;
}

.test-absolute div:nth-of-type(4) {
  position: absolute;
  top: 50px;
}

/* test-relative + test-absolute */
.test-absolute-relative {
  position: relative;
}

.test-absolute-relative div:nth-of-type(2) {
  position: absolute;
  left: 50px;
  opacity: 0.75;
}

/* test-fixed */
.test-fixed div:nth-of-type(2) {
  position: fixed;
  width: 300px;
  top: 50px;
  right: 0px;
  opacity: 0.75;
}

/* test-sticky */
.test-sticky {
  width: 500px;
  position: sticky;
  margin-left: 0px;
  margin-bottom: 0px;
  bottom: 0px;
}

參考資料

position - CSS：层叠样式表 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
position - CSS: Cascading Style Sheets | MDN，https://developer.mozilla.org/en-US/docs/Web/CSS/position
【css】2小時初學者教學 - YouTube，https://youtu.be/Ml78vnNTBLw?t=1933
position - 金魚都能懂的CSS必學屬性 - iT 邦幫忙，https://ithelp.ithome.com.tw/articles/10253500
金魚都能懂網頁設計入門 : Relative 定位 - 鐵人賽第十五天 - YouTube，https://www.youtube.com/watch?v=Rukgrh1HlZg
金魚都能懂網頁設計入門 : Absolute 絕對定位教學 - 鐵人賽第十六天 - YouTube，https://www.youtube.com/watch?v=JOdZdHnuGmM
Day 13 - Position 定位好難啊! - iT 邦幫忙，https://ithelp.ithome.com.tw/articles/10292734