DAY 18 z-index介紹

2023 iThome 鐵人賽

DAY 18

Modern Web

關於學習網頁這檔事系列第 18 篇

15th鐵人賽

SHAO

團隊NUTC_IMAC_WEB_桑貝比

2023-10-03 10:57:38

214 瀏覽

分享至

在網頁設計中，我們經常需要控制不同元素之間的視覺堆疊順序，以實現所需的布局和覆蓋效果。這就是CSS中的 z-index 屬性派上用場的地方。

什麼是 `z-index`？

z-index 是CSS屬性，它允許我們為HTML元素分配一個整數值，決定了元素在堆疊上下文中的垂直堆疊順序。較高的 z-index 值將使元素位於較低值的元素之上。如果多個元素具有相同的 z-index值，則它們將按照它們在文檔流中的順序堆疊。

如何使用

範例一:覆蓋效果

<!DOCTYPE html>
<html>
<head>
<style>
  .box1 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    z-index: 2;
  }
  .box2 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    z-index: 1;
  }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

在這個示例中，box1 的 z-index 值為2，而 box2 的 z-index 值為1。結果是 box1 覆蓋在 box2 之上。

範例二:負z-index值

<!DOCTYPE html>
<html>
<head>
<style>
  .box1 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    z-index: -1;
  }
  .box2 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    z-index: 1;
  }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

在這個示例中，box1 的 z-index 值為負1，因此它位於背景之後，而 box2 位於前景。

範例三:層疊上下文

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
  }
  .box1 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    z-index: 2;
  }
  .box2 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    z-index: 1;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

在這個示例中，container 元素創建了一個新的層疊上下文，它的 z-index 值對 box1 和 box2 的堆疊順序有影響，但不會影響其他元素的堆疊。