CSS HTML Z-Index

一、z-index是什麼？

z-index是CSS中的一個屬性，它可以設置元素的堆疊順序，即決定一個元素在另一個元素之上或之下。默認情況下，HTML元素遵循”後來居上”的原則，即最後一個元素覆蓋在前面的元素之上。

但是，當頁面中有多個元素重疊在一起時，可能會出現元素的顯示順序不符合期望。這時候，就可以通過z-index來手動調整元素的堆疊順序。

二、z-index的用法

z-index屬性的用法非常簡單，只需要在CSS樣式中指定z-index的值即可。值越大，元素就越靠上。如果兩個元素的z-index相同，則按照它們在HTML中出現的先後順序來決定顯示順序。

以下是一個基本的z-index用法示例：

    <div class="box box1"></div>
    <div class="box box2"></div>

    .box1 {
      background-color: blue;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .box2 {
      background-color: red;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50px;
      top: 50px;
      z-index: 2;
    }

上面的示例中，box2會顯示在box1之上，因為box2的z-index值比box1大。

三、應用場景

z-index常用於以下場景：

1. 彈出框

在頁面上彈出的一些提示框或模態框，它們需要在頁面上居於最上層。使用z-index就可以輕鬆實現這一點。

    <div class="overlay"></div>
    <div class="dialog">
      <h2>This is a dialog</h2>
      <p>Hello world!</p>
    </div>

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }
    .dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      z-index: 10000;
    }

上面的示例中，overlay用來覆蓋整個頁面，dialog則居於它的上面。通過指定不同的z-index值，讓它們實現了層疊的效果。

2. 導航欄

網站的導航欄通常需要一直顯示在頁面最上方或最下方。這時可以使用z-index屬性設置導航欄的層疊順序，讓它始終在頁面的最上面。

    <div class="header"></div>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: white;
      z-index: 10000;
    }
    .menu {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: black;
      z-index: 9999;
    }

上面的示例中，header和menu分別指定了不同的z-index值，讓它們在頁面的上下兩端呈現不同的層疊效果。

四、總結

z-index是CSS中非常重要的一個屬性，它可以通過設置元素的層疊順序，實現多個元素之間的層疊效果。在實際開發中，我們常常需要對一些頁面元素進行層疊調整。熟練掌握z-index的用法，可以幫助我們實現更加複雜的頁面布局和交互效果。