共享博客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 设计选项。
-
css如何让导航栏变透明
在css中，可以通过opacity属性来让导航栏变透明，只需要给导航栏元素添加“opacity: 透明度值;”样式即可；...
CSS
3个月前 (09-20) 206 -
css 怎么去除a标签的手形
css去除a标签的手形的方法：1、创建一个html示例文件；2、设置一个a标签；3、给a标签添加一个css属性为“cur...
CSS
3个月前 (09-20) 156 -
css里怎样设置字体大小和字体颜色
在css中，可以使用“font-size”和color属性设置字体大小和字体颜色，只需要给字体元素添加“{font-si...
CSS
3个月前 (09-20) 175 -
css如何固定导航栏
在css中，可以使用position属性固定导航栏；只需要给导航栏元素添加“position: fixed;”样式进行固...
CSS
3个月前 (09-20) 143 -
css边框变圆角边框怎么写
写法：1、给边框添加“border-radius:圆角值;”样式统一设置圆角大小；2、添加“border-top-lef...
CSS
3个月前 (09-20) 137