网页中元素的位置是开发人员分配的一个重要属性。如果你的元素放置不正确，那么它可能会显示为荒谬或无组织的。因此，开发人员明智地分配每个 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 等。
初始– 顺序设置为默认值。
继承– 重叠顺序由父元素继承。
示例
z-index property .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; }z-index property
This is an example.This is an example.
z-index 属性的自动值
z-index属性的auto值是与父元素相同的元素顺序。
示例
Auto value of z-index property .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; }z-index property
This is an example.
This is an example.
z-index 属性的零值
z-index 属性的零值是元素顺序的数值。将 z-index 值指定为 0，创建堆叠内容。例如，如果我们有两个元素元素 1 和元素 2，则它们的 z 索引分别为 1 和 0。因此，元素 1 将堆叠在元素 2 之上。而如果它们的 z 索引分别为 -1 和 0，则元素 1 将堆叠在元素 2 的下方。请考虑以下示例。
示例
Zero value of z-index property .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; }Tutorialspoint
z-index property
This is an example.
This is an example.
z-index 属性没有值
z-index 属性的值通常不会与 auto 值相同。
示例
No value for z-index property .demo{ font-family: cursive, Cochin, Georgia; background-color: #FFFF00; position: absolute; top: 120px; }z-index property
This is an example.
结论
一个具有挑战性的主题是在 CSS 中堆叠上下文。在本文中，我们全面描述了网页上的堆叠上下文如何受到 z-index 的影响，当充分理解 z-index 时，它会转化为强大的 CSS 属性。既然熟悉了这一特性，新开发人员应该能够有效地使用它并避免一些可能发生的常见问题。高级开发人员还应该更加了解 z-index 的适当应用如何解决各种布局挑战并提供各种创造性的 CSS 设计选项。
以上就是auto、0 和无 z-index 之间的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625506.html
微信扫一扫 
支付宝扫一扫 
