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

WBOY 转载: 2023-08-31 23:41:08 123浏览

网页中元素的位置是开发人员分配的一个重要属性。如果你的元素放置不正确，那么它可能会显示为荒谬或无组织的。因此，开发人员明智地分配每个 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中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：LESS 中的 Escape 有什么用？下一条：如何在CSS中创建三角形？