課堂
開始
開始學習
CodeGym /Java Adesua /Frontend SELF TW /堆疊上下文

堆疊上下文

Frontend SELF TW
等級 21 , 課堂 1
開放

2.1 屬性 z-index

堆疊上下文 在 CSS 中由 z-index 屬性控制，決定元素在 Z 軸上（與螢幕垂直的第三個坐標）如何彼此堆疊。了解和正確使用 z-index 和堆疊上下文，可以創建複雜且動態的版面，有著重疊的元素。

堆疊上下文基礎

堆疊上下文決定元素如何彼此疊放。每個網頁上的元素都有一個堆疊層級，可以透過 z-index 屬性來改變。

堆疊規則

  1. 文件樹中的位置：在文件樹低於其他元素的元素會覆蓋其上的元素。
  2. 屬性 z-index：具有較大 z-index 值的元素會覆蓋具有較小 z-index 值的元素。

z-index 基礎

z-index 屬性定義了元素重疊時的堆疊順序。具有較大 z-index 值的元素會顯示在具有較小 z-index 值的元素之上。z-index 僅適用於已定位的元素（position: relative, absolute, fixed 或 sticky）。

語法：

    
      .element {
        position: relative; /* 或者 absolute, fixed, sticky */
        z-index: number;
      }

其中：

  • number: 整數，可以是正數或負數。值越大，元素在堆疊順序中越高。

z-index 的使用示例：

在此示例中，Box 2 設置 z-index: 2;，將顯示在 Box 1 和 Box 3 之上，而 Box 1 將顯示在 Box 3 之上。

CSS
    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
HTML
    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>

2.2 堆疊上下文 (stacking context)

堆疊上下文 是一組在定義堆疊順序時被視為一個整體的元素。堆疊上下文在滿足特定條件時創建，例如應用具定位的 z-index 或具有其他 CSS 屬性。

創建堆疊上下文

堆疊上下文在以下情況下創建：

  1. 元素有著 relative, absolute, fixed 或 sticky 定位，且 z-index 值不為 auto。
  2. 元素的 opacity 屬性值小於 1。
  3. 元素的 transform, filter, perspective, clip-path, mask 或 mask-image 屬性值不同於預設值。
  4. 元素的 contain 屬性值為 layout, paint, 或 strict。

創建堆疊上下文的示例：

CSS
    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
HTML
    
      <div class="parent">
        父元素
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>

代碼解釋：

  • .parent: 具有 position: relative; 和 z-index: 10; 的元素，創建了一個新的堆疊上下文
  • .child-blue: 具有 position: absolute; 和 z-index: 1; 的元素，位於其父元素創建的新堆疊上下文中
  • .child-red: 具有 position: absolute; 和 z-index: 2; 的元素，同樣位於其父元素創建的新堆疊上下文中，並將會顯示在 .child-blue 之上

2.3 堆疊上下文的交互

在一個堆疊上下文中的元素無法覆蓋另一個堆疊上下文中的元素，除非更改堆疊上下文本身的順序。這意味著一個堆疊上下文中的 z-index 較高的元素，將始終顯示在同一上下文中 z-index 較低的元素之上。

堆疊上下文交互示例：

CSS
    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
HTML
    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>

在此示例中，.container2 容器具有 z-index: 20; 將顯示在具有 z-index: 10; 的 .container1 容器之上。每個容器中的元素將根據其 z-index 排列，但不會與另一個容器中的元素重疊。

2.4 負值的 z-index

z-index 可以是負值，這允許元素定位在具有零或正 z-index 值的元素之下。

CSS
    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
HTML
    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>

代碼解釋：

  • .box1: 具有 z-index: -1; 的元素，將在 z-index: 0; 的元素之下

使用 z-index 的建議：

  • 最小化使用 z-index: 盡量只有在確實需要時才使用 z-index。這有助於避免複雜且混亂的堆疊結構
  • 有意識地創建堆疊上下文: 創建新的堆疊上下文有助於管理元素的重疊，但可能會讓文件結構更加複雜
  • 使用有意義的 z-index 值: 為元素指定有意義的 z-index 值，例如對於位於頂部的元素使用正值，對於位於底部的使用負值
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION