首頁 > 文章 > web前端 > auto、0 與無 z-index 之間的區別

auto、0 與無 z-index 之間的區別

WBOY轉載: 2023-08-31 23:41:08686瀏覽

auto、0 和无 z-index 之间的区别

網頁中元素的位置是開發人員指派的一個重要屬性。如果你的元素放置不正確，那麼它可能會顯示為荒謬或無組織的。因此，開發人員明智地分配每個 HTML 元素的位置非常重要。

有時，儘管分配了各自的位置，但元素可能會重疊。這些重疊的元素可以彼此堆疊並且可以隱藏其他元素。為了解決這個問題，CSS 為網頁設計提供了 z-index 屬性。在這篇文章中，我們將學習 CSS 的 z-index 屬性。我們還將討論 z-index 的不同值以及它們之間的差異。

什麼是 z-index 屬性？

CSS 的 z-index 屬性使開發人員能夠指定在 z 軸上（即螢幕內或螢幕外）重疊的元素的順序。但是，z-index 屬性僅適用於指定了 static 以外的位置值的元素。

HTML 元素的堆疊層級由 z-index 屬性決定。元素在 Z 軸上的位置稱為「堆疊層級」（與 X 軸或 Y 軸相對）。如果該值較高，則該元素將放置在靠近堆疊順序頂部的位置。這種堆疊排列垂直於視口或顯示器。

HTML 頁面中 Z 軸上組件的自然堆疊順序受到多種因素的影響。這些是具有負堆疊上下文的元素、非定位、非浮動、區塊元素、非定位、浮動元素、內聯元素和定位元素，全部按顯示順序排列。

文法

element{
   z-index: values;
}

以下是該屬性的值 -

自動 - 重疊順序與父級的值相同。這是預設值。
數字- 重疊的順序指定為數字，如 1、2、3 等。
初始- 順序設定為預設值。
繼承- 重疊順序由父元素繼承。

範例

<!DOCTYPE html>
<html>
<head>
   <title>z-index property</title>
   <style>
      .demo1{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 100px;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: #FFFF00;
         position: absolute;
         top: 100px;
         left: 300px;
         z-index: 2;
         width: 200px;
      }
   </style>
</head>
<body>
   <center>
      <h2> z-index property </h2>
      <div class= "demo1"> This is an example. </div>
      <div class= "demo2"> This is an example. </div>
   </center>
</body>
</html>

z-index 屬性的自動值

z-index屬性的auto值是與父元素相同的元素順序。

範例

<!DOCTYPE html>
<html>
<head>
   <title>Auto value of z-index property</title>
   <style>
      .demo1{
         font-family: verdana,'cursive';
         background-color: #FFFF00;
         position: absolute;
         top: 120px;
         z-index: auto;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 200px;
         z-index: auto;
      }
   </style>
</head>
<body>
   <center>
      <h2>z-index property</h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
   </center>
</body>
</html>

z-index 屬性的零值

z-index 屬性的零值是元素順序的數值。將 z-index 值指定為 0，建立堆疊內容。例如，如果我們有兩個元素元素 1 和元素 2，則它們的 z 索引分別為 1 和 0。因此，元素 1 將堆疊在元素 2 之上。而如果它們的 z 索引分別為 -1 和 0，則元素 1 將堆疊在元素 2 的下方。請考慮以下範例。

範例

<!DOCTYPE html>
<html>
<head>
   <title>Zero value of z-index property</title>
   <style>
      .demo1{
         font-family: cursive, Cochin, Georgia;
         background-color: #FF0000;
         position: absolute;
         top: 120px;
         z-index: 0;
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
         background-color: red;
         position: absolute;
         top: 100px;
         left: 300px;
         z-index: 0;
         width: 200px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>z-index property</h2>
   <p class= "demo1">This is an example.</p>
   <p class= "demo2">This is an example.</p>
</body>
</html>

z-index 屬性沒有值

z-index 屬性的值通常不會與 auto 值相同。

範例

<!DOCTYPE html>
<html>
<head>
   <title>No value for z-index property</title>
   <style>
      .demo{
         font-family: cursive, Cochin, Georgia;
         background-color: #FFFF00;
         position: absolute;
         top: 120px;
      }
   </style>
</head>
<body>
   <h2>z-index property</h2>
   <p class= "demo">This is an example.</p>
</body>
</html>

結論

一個具有挑戰性的主題是在 CSS 中堆疊上下文。在本文中，我們全面描述了網頁上的堆疊上下文如何受到 z-index 的影響，當充分理解 z-index 時，它會轉化為強大的 CSS 屬性。既然熟悉了這個特性，新開發人員應該能夠有效地使用它並避免一些可能發生的常見問題。資深開發人員也應該更了解 z-index 的適當應用如何解決各種佈局挑戰並提供各種創意的 CSS 設計選項。

以上是auto、0 與無 z-index 之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html Static auto 继承栈堆

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：LESS 中的 Escape 有什麼用？下一篇：LESS 中的 Escape 有什麼用？

看更多