网页中元素的位置是开发人员分配的一个重要属性。如果你的元素放置不正确，那么它可能会显示为荒谬或无组织的。因此，开发人员明智地分配每个 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 之间的区别的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » auto、0 和无 z
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
