数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究auto、0 和无 z-index 之间的区别
网页元素的位置对于开发者来说是一个至关重要的属性。如果元素位置安排不当，可能会导致显示混乱或无序。因此，开发者需要谨慎地设置每个HTML元素的位置。
有时，即使元素分别指定了位置，也可能发生重叠的情况。这些重叠的元素可能会堆叠在一起，隐藏其他元素。为了解决这个问题，CSS 提供了 z-index 属性用于网页设计。在本文中，我们将学习 CSS 的 z-index 属性。我们还将讨论 z-index 的不同值以及它们之间的区别。
什么是 z-index 属性？
CSS 的 z-index 属性使开发者能够指定在 z 轴上（即屏幕内或屏幕外）重叠元素的顺序。但是，z-index 属性仅适用于 position 值不是 static 的元素。
HTML 元素的堆叠级别由 z-index 属性决定。“堆叠级别”指的是元素在 Z 轴上的位置（与 X 轴或 Y 轴相对）。值越高，元素在堆叠顺序中的位置越靠上。这种堆叠顺序垂直于视口或显示。
HTML页面中Z轴上组件的自然堆叠顺序受多种因素影响。这些因素按显示顺序排列：具有负堆叠上下文的元素、非定位、非浮动、块级元素、非定位、浮动元素、内联元素和定位元素。
语法
element{
z-index: values;
}
此属性的值如下：
auto - 重叠顺序与父元素的值相同。这是默认值。
数字 - 重叠顺序指定为数字，例如 1、2、3 等。
initial - 将顺序设置为默认值。
inherit - 重叠顺序由父元素继承。
示例
<!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 属性的 auto 值
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，会创建一个堆叠上下文。例如，如果我们有两个元素 element 1 和 element 2，它们的 z-index 分别为 1 和 0。那么，element 1 将堆叠在 element 2 上方。而如果它们的 z-index 分别为 -1 和 0，则 element 1 将堆叠在 element 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 如何影响网页上的堆叠上下文进行了全面描述，充分理解后，它将成为一个强大的 CSS 属性。现在，新手开发者应该能够有效地使用此属性并避免一些常见的错误。高级开发者也应该更清楚地了解如何正确应用 z-index 来解决各种布局问题并提供各种创意 CSS 设计选项。
190 次浏览
