定位 position

所有網頁元素在排版中都有預設的定位方式，透過定位相關的樣式屬性，就能更明確地進行元素的定位，這也是許多別具創意的排版常用的排版樣式。這篇教學會完整介紹 position、top、bottom、right、left、z-index 等定位相關的樣式屬性。

快速導覽：

位置距離：top、bottom、left、right

定位方式：position

static 預設定位

relative 相對定位

absolute 絕對定位

fixed 固定定位

sticky 黏貼定位

圖層關係：z-index

CSS 教學 - 定位 position

位置距離：top、bottom、left、right

除了使用預設值進行定位，也會透過 top、bottom、left、right 這四個樣式屬性指定位置，這四個樣式屬性代表「被定位的元素與其參考容器的四個方向的距離」，通常也會稱為「offset 屬性」，這四個樣式屬性僅適用於「定位樣式非 static」的元素，且都沒有繼承特性。

樣式屬性	說明
top	與參考容器上緣之間的距離。
bottom	與參考容器下緣之間的距離。
left	與參考容器左側之間的距離。
right	與參考容器右側之間的距離。

這四個樣式的屬性值預設都是 auto，使用「絕對長度或相對長度」的數值作為單位 ( 參考「長度與角度單位」)，由於「top、bottom」和「left、right」代表完全不同方向的距離數值，通常不會同時使用 ( 因為沒必要，就如同定義座標也只需要兩個數值 )，但如果真的同時使用 ( 製作不同方向語系的網頁 )，則會遵循下列規則：

top 與 bottom 同時使用時，以 top 數值為主。

left 與 right 同時使用時，參考容器的文字左到右書寫語系以 left 為主，右到左書寫語系以 right 為主。

下方的範例使用呈現同時使用四個樣式屬性的狀況，由於元素排版方向一率由上到下，所以都會使用 top 數值為主，如果文字書寫方向是右到左，就會以 right 為主。

線上展示：https://codepen.io/oxxo/pen/oNraqem

<!-- HTML 程式碼-->
<div class="a">
  <div>文字左到右</div>
</div>
<div class="b">
  <div>文字右到左</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div[class]{
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    position: relative;   /* 因為子元素使用 absolute，所以需要設定 relative 產生參考容器 */
    margin: 10px;
  }
  .b {direction: rtl;}
  div div {
    border: 1px solid red;
    width: 100px;
    height: 50px;
    position: absolute;
    top: 5px;
    bottom: 30px;
    left: 5px;
    right: 30px;
  }
</style>

CSS 教學 - 定位 position - 同時使用 top、bottom、left、right

定位類型：position

position 樣式屬性可以定義元素的「定位方式」，沒有繼承特性，不論元素 position 的屬性值為何，在排版時都會有一個「容器」作為定位的參考依據，下方會列出相關屬性值，接著再分別介紹各個屬性值的意義和使用方式。

屬性值	說明	定位參考	z-index 影響
static	預設定位	文件預設排版方向。	X
relative	相對定位	元素原始的位置。	O
absolute	絕對定位	非 `static` 的祖先元素或 `body` 元素。	O
fixed	固定定位	視窗邊界或套用特殊樣式的祖先元素。	O
sticky	黏貼定位	捲動後元素和視窗邊界的距離。	O

position:static 預設定位

position:static 是元素預設的定位樣式，通常不需要額外設定這個樣式屬性，除非是在某些情況要不同排版狀態才會進行設定 ( 不同解析度畫面、與使用者互動...等 )，這表示所有的元素都有有下列預設的定位特性：

元素會按照自身的的顯示類型，根據「預設的」排版方向 Normal Flow 定位。

不會被 top、bottom、left、right、z-index 的數值影響。

下方範例展示 inline 元素和 block 元素預設的排版情況。

線上展示：https://codepen.io/oxxo/pen/GRbYxMR

<!-- HTML 程式碼-->
inline 元素
<div class="a">
  <span>apple</span>
  <span>banana</span>
  <span>coconut</span>
  <span>oxxo</span>
</div>
block 元素
<div class="b">
  <div>apple</div>
  <div>banana</div>
  <div>coconut</div>
  <div>oxxo</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 5px;
    margin: 5px;
  }
  div div{background: #ccc;}
  span {
    background: #ccc;
    border: 1px solid #000;
  }
</style>

CSS 教學 - 定位 position - static 預設定位

position:relative 相對定位

position:relative 表示元素會進行「相對定位」，設定這個屬性值的元素會有下列特性：

根據元素「原本的大小和位置」進行相對位移。

相對定位元素位移之後，會保留原本的「容器空間」，不會因為元素發生相對定位造成版面位移。

相對定位元素會使用「margin 外邊界」進行定位。

顯示屬性為 table-*-group、table-row、table-column、table-cell、table-caption 的元素無法設定相對定位。

下方的例子可以清楚看出元素設定為相對定位後，相對位置的參考對象是元素「原本的位置」，藍色虛線框表示元素原本的位置和所佔的空間，不會因為元素位置進行相對移動之後，造成文字往上移動的狀況。

線上展示：https://codepen.io/oxxo/pen/NWZOYaR

<!-- HTML 程式碼-->
<div>
  oxxo.studio
  <div class="a">top: 30px;<br/>left: 80px</div>
  hello world!!
</div>
<div>
  oxxo.studio
  <div class="b">bottom: 30px;<br/>right: 50px;</div>
  hello world!!
</div>

<!-- CSS 程式碼 -->
<style>
  div:not([class]) {
    border: 1px solid #000;
    width: 200px;
    height: 150px;
    margin: 10px 50px;
  }
  .a, .b {
    border: 1px solid red;
    background: pink;
    position: relative;  /* 設定相對定位 */
    width: 100px;
    height: 100px;
    font-size:14px;
  }
  .a {
    top: 30px;
    left: 80px;
  }
  .b {
    bottom: 30px;
    right: 50px;
  }
</style>

CSS 教學 - 定位 position - relative 相對定位

根據同樣的規則，如果相對定位的元素出現在「行內元素」的內容裡，元素原本的內容空間也會被保留，下方範例會將 strong 元素變成相對定位，原本的空間仍然會保留而呈現空白狀態。

線上展示：https://codepen.io/oxxo/pen/yLdRKzo

<!-- HTML 程式碼-->
<div>
STEAM 教育由五個單字組成，分別是 Science ( 科學 )、Technology ( 技術 )、Engineering ( 工程 )、Arts ( 藝術 ) 和 Mathematics ( 數學 )，因此 STEAM 教育也稱作「跨學科教育」。<strong>OXXO.STUDIO</strong> STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 280px;
    height: 240px;
  }
  strong {
    background: pink;
    position: relative;
    top: 60px;
    left: 50px;
  }
</style>

CSS 教學 - 定位 position - relative 相對定位元素原本的內容空間也會被保留

position:absolute 絕對定位

position:absolute 表示元素會進行「絕對定位」，設定這個屬性值的元素會有下列特性：

絕對定位元素會參考元素「最靠近的非 static 元素 」位置進行定位 ( 「非 static 容器」表示該容器的不能是 position:static )。

如果絕對定位元素「沒有」參考的非 static 容器，則會使用 body 作為定位容器。

絕對定位元素會脫離原本的排版方式，元素容器和內容空間會完全獨立於其他平面。

絕對定位元素預設位置會使用「如果只有單一元素，預設的擺放位置」，可透過 top、left 之類樣式修改。

絕對定位元素的定位位置是「margin 外邊界」。

絕對定位元素的顯示類型會轉換成「block」類型，可設定寬高與上下邊界。

下方範例展示絕對定位元素所參考的「非 static 容器」，藍色 div 因為父元素設定 position:relative 就會參考父元素，紅色 div 因為有一個祖先元素設定了 position:relative，就會參考這個元素，而綠色 div 因為其父元素都沒有設定，就會參考頁面進行絕對定位。

線上展示：https://codepen.io/oxxo/pen/JjQmLrm

<!-- HTML 程式碼-->
<div class="a">
  <div>
    <div>apple</div>
  </div>
</div>
<div class="b">
  <div>
    <div>banana</div>
  </div>
</div>
<div class="c">
  <div>
    <div>oxxo</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  body {padding-top:60px;}
  div {
    border: 1px solid #000;
    padding: 20px;
    background: #aaa;
    margin: 10px;
  }
  div div {
    background: #ccc;
    margin: 0;
  }
  div div div {
    position: absolute;
    top: 0;
    left: 0;
  }
  .a > div {position: relative;}   /* 第二層 div 為「非 static 容器」 */
  .a div div {background: #f005;}

  .b {position: relative;}         /* 第一層 div 為「非 static 容器」 */
  .b div div {background: #06f5;}

  .c div div {background: #0a05;}
</style>

CSS 教學 - 定位 position - absolute 絕對定位

因為絕對定位元素會使用「margin 外邊界」進行定位，所以如果絕對定位元素本身有設定外邊界，則定位時需要加上或減去外邊界的數值，下方範例的元素設定了 margin:20px，定位時就會發現位置往右往下各移動了 20px。

線上展示：https://codepen.io/oxxo/pen/VwJEXMN

<!-- HTML 程式碼-->
<div class="a">
  <div>
    <div>apple</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 20px;
    background: #aaa;
    margin: 10px;
  }
  div div {
    position: relative;
    background: #ccc;
    margin: 0;
  }
  div div div {
    position: absolute;
    top: 0;
    left: 0;
    margin: 20px;       /* 設定外邊界 */
    background: #f005;
  }
</style>

CSS 教學 - 定位 position - absolute 絕對定位元素設定外邊界

轉換成絕對定位元素會脫離原本的排版方式，彷彿從原本的排版消失，獨立到另外的圖層，原本所佔的容器或內容空間，就會由其他的元素根據排版方式填補，下方的範例將文字裡的 strong 元素轉換成絕對定位，除了離開原本的位置且由其他元素遞補位置，也可以看出 strong 元素具有 block 特性，可以調整寬高與上下邊界。

線上展示：https://codepen.io/oxxo/pen/RwzeMLX

<!-- HTML 程式碼-->
<div>
  STEAM 教育學習網秉持著 STEAM/STEM 的精神<strong>OXXO.STUDIO</strong>，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
    padding: 20px;
    position: absolute;  /* 父元素設定為 absolute 變成非 static 元素 */
  }
  strong {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid red;
    padding: 10px 30px;
    background: #f005;
  }
</style>

CSS 教學 - 定位 position - absolute 絕對定位元素會脫離原本的排版方式

position:fixed 固定定位

position:fixed 表示元素會進行「固定定位」，設定這個屬性值的元素會有下列特性：

固定定位元素會參考所在的「頁面視窗」進行定位，不會隨卷軸滾動而移動。

固定定位元素會脫離原本的排版方式，元素容器和內容空間會完全獨立於其他平面。

固定定位元素的定為位置是「margin 外邊界」。

固定定位元素的顯示類型會轉換成「block」類型，可設定寬高與上下邊界。

如果固定元素的「祖先元素」的 transform、perspective、filter 或 backdrop-filter 的屬性值非 none，固定元素就會參考這個元素進行定位。

下方範例會將四個固定定位元素分別定位在頁面的四個角落，不論這些元素原本位在何處，定位後就會使用頁面視窗進行定位。

線上展示：https://codepen.io/oxxo/pen/Bagqrmj

<!-- HTML 程式碼-->
<div>
  STEAM 教育學習網秉持著 STEAM/STEM 的精神<div class="a">apple</div>，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
</div>
<div>我是 div
  <div class="b">banana</div>
</div>
<div>我是第一層 div
  <div>我是第二層 div
    <div class="c">coconut</div>
  </div>
</div>
<div class="d">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
  }
  div[class] {
    position: fixed;  /* 具有 class 屬性的 div 都設定為 fixed */
    width: 100px;
    height: 100px;
    padding: 0;
  }
  .a {
    top: 0;
    left: 0;
    background: #f00d;
  }
  .b {
    top: 0;
    right: 0;
    background: #0a0d;
  }
  .c {
    bottom: 0;
    right: 0;
    background: #00fd;
  }
  .d {
    bottom: 0;
    left: 0;
    background: #f90d;
  }
</style>

CSS 教學 - 定位 position - fixed 固定定位

如果固定元素的「祖先元素」的 transform、perspective、filter 或 backdrop-filter 的屬性值非 none，固定元素就會參考這個元素進行定位，下方範例將設定了某個 div 為 filter: blur(2px)，位於該 div 裡的固定元素，就會參考這個 div 進行定位，也因為是參考元素不是參考視窗，捲軸移動時就會跟著移動。

線上展示：https://codepen.io/oxxo/pen/yLdRKPo

<!-- HTML 程式碼-->
<div>
  STEAM 教育學習網秉持著 STEAM/STEM 的精神<div class="a">apple</div>，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
</div>
<div>我是 div
  <div class="b">banana</div>
</div>
<div>我是第一層 div
  <div class="test">我是第二層 div
    <div class="c">coconut</div>
  </div>
</div>
<div class="d">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
  }
  .a, .b, .c, .d {
    position: fixed;
    width: 100px;
    height: 100px;
    padding: 0;
  }
  .a {
    top: 0;
    left: 0;
    background: #f00d;
  }
  .b {
    top: 0;
    right: 0;
    background: #0a0d;
  }
  .c {
    bottom: 0;
    right: 0;
    background: #00fd;
  }
  .d {
    bottom: 0;
    left: 0;
    background: #f90d;
  }
  .test {
    filter: blur(2px);  /* 設定有模糊的 filter */
  }
</style>

CSS 教學 - 定位 position - fixed 固定定位元素祖先有設定 filter

position:sticky 黏貼定位

position:sticky 表示元素會進行「黏貼定位」，設定這個屬性值的元素會有下列特性：

黏貼定位元素會參考元素「最靠近的祖先元素的捲動高度」進行定位。

當黏貼定位元素的 top、bottom、left 或 right 數值小於等於元素和視窗邊緣的距離，黏貼定位元素就會具有類似 fixed 固定不動的表現方式。

如果數值大於元素和視窗邊緣的距離，或接觸到任意祖先元素的邊緣，黏貼定位元素就會恢復成類似 relative 跟隨元素移動的表現方式。

如果黏貼定位的祖先元素設定了 overflow 的樣式屬性，可能會影響黏貼定位元素的顯示。

下方範例將黃色 div 設定為黏貼定位，當這個 div 往上捲動距離視窗上緣 50px 的時候，就會觸發變成類似 fixed 固定不動，但當碰到父元素邊緣或距離視窗上緣超過 50px 的時候，又會恢復成類似 relative 相對移動的方式。

線上展示：https://codepen.io/oxxo/pen/XWLxEzE

<!-- HTML 程式碼-->
<div class="test">紅色區塊高度 50px;</div>
<h1>Hello!!</h1>
<div>
  <div class="a">oxxo</div>
</div>
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
  }
  .a {
    width: 100px;
    height: 100px;
    position: sticky;   /* 設定為黏貼定位 */
    top: 50px;
    left: 0;
    background: yellow;
  }
  .test {
    position: fixed;    /* 使用一個固定定位元素凸顯位置 */
    top: 0;
    left: 110px;
    background: #f009;
    height: 50px;
    top: 0;
    left: 110px;
  }
</style>

CSS 教學 - 定位 position - sticky 黏貼定位

下方範例會將所有的 h2 設定為黏貼定位元素，可以看出當捲動捲軸抵達頂端時，h2 就會固定不動，呈現出特別的閱讀效果。

線上展示：https://codepen.io/oxxo/pen/abgRYVj

<!-- HTML 程式碼-->
<main>
  <h1>Hello World!!</h1>
  <h2 class="a">apple</h2>
  <p>我是內容<br/>我是內容<br/>我是內容<br/>我是內容<br/></p>
  <h2>banana</h2>
  <p>我是內容<br/>我是內容<br/>我是內容<br/>我是內容<br/></p>
  <h2>oxxo</h2>
  <p>我是內容<br/>我是內容<br/>我是內容<br/>我是內容<br/></p>
  <p>我是內容<br/>我是內容<br/>我是內容<br/>我是內容<br/></p>
  <p>我是內容<br/>我是內容<br/>我是內容<br/>我是內容<br/></p>
</main>

<!-- CSS 程式碼 -->
<style>
  main {
    border: 1px solid #000;
  }
  h2 {
    background: orange;
    position: sticky;
    top: 0;
  }
</style>

CSS 教學 - 定位 position - sticky 黏貼定位特別的閱讀效果

圖層關係：z-index

z-index 樣式屬性可以設定元素的「Z 軸」位置，也就是常見專有名詞「圖層」，表示每個元素在顯示時的「前後關係」，通常在預設狀態下，程式碼裡下方元素的「容器空間」會覆蓋上方元素，但內容不會覆蓋，z-index 樣式屬性沒有繼承特性，但具有下列特性：

只適用於「非 static 定位元素」。

屬性值使用「正整數或負整數」，值越大越靠近使用者，數值越小越靠遠離使用者，數值大的元素覆蓋數值小的元素。

如果數值相同，則按照程式碼中的順序，下方元素覆蓋上方元素。

預設值 auto，等同 z-index:0。

CSS 教學 - 定位 position - 圖層關係 z-index

下方範例有兩組 div，都有修改 div 的 margin 使其互相覆蓋，上方的 div 使用預設值，可以看出下方元素雖然會覆蓋上方元素，而下方的 div 都修改成 position:relative，下方元素的「容器和內容」就都會覆蓋掉上方的元素。

線上展示：https://codepen.io/oxxo/pen/GRbYxyR

<!-- HTML 程式碼-->
<main>
  <div class="a">apple</div>
  <div class="b">banana</div>
  <div class="c">oxxo</div>
</main>
<main class="z">
  <div class="a">apple</div>
  <div class="b">banana</div>
  <div class="c">oxxo</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {padding: 30px;}
  .z div {position: relative;} /* 下方的 div 都是 relative */
  div {
    padding: 16px;
    margin-top: -30px;
    border: 1px solid #000;
    font-size: 24px;
  }
  .a {background: #f90;}
  .b {
    margin-left: 10px;
    background: #0c0;
  }
  .c {
    margin-left: 20px;
    background: #0cf;
  }
</style>

CSS 教學 - 定位 position - z-index 預設的容器與內容覆蓋狀況

下方範例會修改 z-index 數值，讓 div 圖層前後排列順序改變，就會產生不同的效果。

線上展示：https://codepen.io/oxxo/pen/BagqrJj

<!-- HTML 程式碼-->
<main>
  <div class="a">apple</div>
  <div class="b">banana</div>
  <div class="c">oxxo</div>
</main>
<main class="z">
  <div class="a">apple</div>
  <div class="b">banana</div>
  <div class="c">oxxo</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {padding: 30px;}
  .z div {position: relative;}
  div {
    padding: 16px;
    margin-top: -30px;
    border: 1px solid #000;
    font-size: 24px;
  }
  .a {
    background: #f90;
    z-index: 10;       /* z-index 數值最大，擺在最前面 ( 原本在後方 ) */
  }
  .b {
    margin-left: 10px;
    background: #0c0;
    z-index: -99;      /* z-index 數值最小，擺在最後面 ( 原本在中間 ) */
  }
  .c {
    margin-top: -60px;
    margin-left: 80px;
    background: #0cf;
    z-index: 5;      /* z-index 數值第二大，擺在中間 ( 原本在最後方 ) */
  }
</style>

CSS 教學 - 定位 position - 設定 z-index

小結

元素的定位是網頁排版中最常出現的技巧，幾乎隨處可見透過定位方式來指定元素位置，透過這篇教學可以清楚認識元素的定位，相信對於網頁排版一定相當有幫助。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

定位 position

位置距離：top、bottom、left、right

定位類型：position

position:static 預設定位

position:relative 相對定位

position:absolute 絕對定位

position:fixed 固定定位

position:sticky 黏貼定位

圖層關係：z-index

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩