搜索
首页web前端css教程auto、0 和无 z-index 之间的区别

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 id="z-index-property"> 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 id="z-index-property">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 id="Tutorialspoint">Tutorialspoint</h1>
   <h2 id="z-index-property">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 id="z-index-property">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中文网其他相关文章!

声明
本文转载于:tutorialspoint。如有侵权,请联系admin@php.cn删除
每周平台新闻:Galaxy Store的Web应用程序,Tappable Stories,CSS Subgrid每周平台新闻:Galaxy Store的Web应用程序,Tappable Stories,CSS SubgridApr 14, 2025 am 11:20 AM

在本周的综述中:Firefox获得了类似锁匠的力量,三星的Galaxy Store开始支持Progressive Web Apps,CSS Subgrid正在Firefox发货

每周平台新闻:Internet Explorer模式,搜索控制台中的速度报告,限制通知提示每周平台新闻:Internet Explorer模式,搜索控制台中的速度报告,限制通知提示Apr 14, 2025 am 11:15 AM

在本周的综述中:Internet Explorer进入Edge,Google Search Console吹捧新的速度报告,Firefox提供了Facebook&#039;

CSS自定义属性的范围的功率(和乐趣)CSS自定义属性的范围的功率(和乐趣)Apr 14, 2025 am 11:11 AM

您可能至少已经对CSS变量有点熟悉了。如果没有,这是两秒钟的概述:它们真的称为自定义属性

我们是程序员我们是程序员Apr 14, 2025 am 11:04 AM

构建网站正在编程。编写HTML和CSS正在编程。我是程序员,如果您在这里阅读CSS-Tricks,那么您很有可能是您

您如何从网站上删除未使用的CSS?您如何从网站上删除未使用的CSS?Apr 14, 2025 am 10:59 AM

在这里,我想预先知道的是:这是一个很难的问题。如果您降落在这里,因为您希望指向您可以运行的工具

图片中的图片网络API简介图片中的图片网络API简介Apr 14, 2025 am 10:57 AM

图片中的图片在2016年发行了Macos Sierra,在Safari浏览器中首次出现在网络上。这使用户可以弹出

使用Gatsby组织和准备图像以使图像模糊效果的方法使用Gatsby组织和准备图像以使图像模糊效果的方法Apr 14, 2025 am 10:56 AM

盖茨比(Gatsby)进行了出色的处理和处理图像。例如,它可以帮助您节省图像优化的时间,因为您不必手动

哦,嘿,填充百分比基于父元素的宽度哦,嘿,填充百分比基于父元素的宽度Apr 14, 2025 am 10:55 AM

今天,我学到了一些有关基于百分比的(%)填充的知识,我脑海中完全错了!我一直认为百分比填充是基于

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器