一、层叠上下文的基础概念
在网页开发中，层叠上下文是一个非常重要的概念。简单来说，层叠上下文就像是一个三维空间，网页中的元素在这个空间中按照一定的规则进行层叠显示。
1.1 层叠上下文的创建
- 根元素（HTML）本身就是一个层叠上下文。
- 定位元素（position 值为 relative、absolute 或 fixed）且 z-index 不是 auto 时会创建层叠上下文。
- 弹性盒子（display 为 flex 或 inline-flex）的子元素，当 z-index 不是 auto 时会创建层叠上下文。
- 网格布局（display 为 grid 或 inline-grid）的子元素，当 z-index 不是 auto 时会创建层叠上下文。
1.2 层叠顺序
层叠顺序决定了元素在层叠上下文中的显示顺序。一般来说，有以下几个规则：
- 背景和边框：位于最底层。
- 负 z-index 的元素：在背景和边框之上。
- 块级元素：按照在文档流中的顺序依次层叠。
- 浮动元素：在块级元素之上。
- 行内元素：在浮动元素之上。
- 正 z-index 的元素：在所有其他元素之上。
二、z-index 的作用与问题
z-index 是用来控制元素在层叠上下文中的层级的。通常情况下，较大的 z-index 值会使元素显示在较小 z-index 值元素的上方。
2.1 z-index 设置极大值仍被遮盖的原因
有时候，即使我们将 z-index 设置为一个极大值，元素仍然可能被其他元素遮盖。这是因为 z-index 只在同一个层叠上下文中有效。如果元素不在同一个层叠上下文中，z-index 的大小就没有意义了。
例如，我们有两个元素 A 和 B：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z - index example</title>
<style>
/* 元素A */
#a {
position: relative;
z-index: 1000;
width: 200px;
height: 200px;
background-color: red;
}
/* 元素B */
#b {
position: relative;
z-index: 500;
width: 100px;
height: 100px;
background-color: blue;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
在这个例子中，元素 A 的 z-index 是 1000，元素 B 的 z-index 是 500，所以元素 A 会显示在元素 B 的上方。
但是，如果我们改变元素 B 的定位方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z - index example</title>
<style>
/* 元素A */
#a {
position: relative;
z-index: 1000;
width: 200px;
height: 200px;
background-color: red;
}
/* 元素B */
#b {
position: absolute;
z-index: 500;
width: 100px;
height: 100px;
background-color: blue;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
此时，元素 B 创建了一个新的层叠上下文，它不再与元素 A 在同一个层叠上下文中。所以，即使元素 A 的 z-index 更大，元素 B 也可能会遮盖元素 A。
2.2 定位元素与负值层级的关系
定位元素与负值层级之间也存在一些微妙的关系。当一个定位元素的 z-index 为负值时，它会显示在背景和边框之上，但在其他非定位元素之下。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Negative z - index example</title>
<style>
/* 非定位元素 */
#c {
width: 200px;
height: 200px;
background-color: green;
}
/* 定位元素且z - index为负值 */
#d {
position: relative;
z-index: -1;
width: 100px;
height: 100px;
background-color: yellow;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="c"></div>
<div id="d"></div>
</body>
</html>
在这个例子中，元素 D 虽然 z-index 为 -1，但它是定位元素，所以会显示在元素 C 之下。
三、应用场景
3.1 导航栏的层叠效果
在网页的导航栏中，我们常常需要实现下拉菜单等层叠效果。通过合理设置 z-index 和定位，可以让下拉菜单在鼠标悬停时显示在其他元素之上。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation example</title>
<style>
/* 导航栏容器 */
nav {
position: relative;
}
/* 导航栏链接 */
nav a {
display: inline - block;
padding: 10px 20px;
background-color: gray;
text-decoration: none;
color: white;
}
/* 下拉菜单 */
nav ul {
list - style: none;
margin: 0;
padding: 0;
position: absolute;
background-color: lightgray;
z - index: 100;
}
nav ul li {
display: none;
}
nav a:hover + ul li {
display: block;
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<ul>
<li><a href="#">子页面1</a></li>
<li><a href="#">子页面2</a></li>
</ul>
<a href="#">关于我们</a>
</nav>
</body>
</html>
在这个例子中，下拉菜单通过设置 position 为 absolute 和合适的 z-index，在鼠标悬停时能够正确地显示在其他元素之上。
3.2 弹出框的显示
弹出框也是层叠上下文应用的常见场景。我们希望弹出框能够覆盖在页面的其他元素之上，并且不会被滚动条等影响。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal example</title>
<style>
/* 背景层 */
.modal - bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z - index: 200;
}
/* 弹出框内容 */
.modal - content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
z - index: 300;
}
button {
padding: 10px 20px;
}
</style>
</head>
<body>
<button onclick="showModal()">显示弹出框</button>
<div class="modal - bg" style="display: none;"></div>
<div class="modal - content" style="display: none;">
<h2>这是一个弹出框</h2>
<button onclick="hideModal()">关闭</button>
</div>
<script>
function showModal() {
document.querySelector('.modal - bg').style.display = 'block';
document.querySelector('.modal - content').style.display = 'block';
}
function hideModal() {
document.querySelector('.modal - bg').style.display = 'none';
document.querySelector('.modal - content').style.display = 'none';
}
</script>
</body>
</html>
这里，背景层和弹出框内容通过设置不同的 z-index，确保了弹出框能够正确地显示在页面之上。
四、技术优缺点
4.1 优点
- 可以精确控制元素的层叠顺序，实现复杂的页面布局和交互效果。
- 对于一些需要突出显示或者遮盖其他元素的场景非常有用，比如导航栏下拉菜单、弹出框等。
4.2 缺点
- z-index 的作用依赖于层叠上下文，如果层叠上下文设置不当，可能会导致元素显示不符合预期。
- 过多地使用 z-index 可能会使代码变得难以维护和理解，尤其是在复杂的页面布局中。
五、注意事项
5.1 合理设置层叠上下文
在使用 z-index 之前，要确保元素在正确的层叠上下文中。避免出现元素不在同一个层叠上下文却期望通过 z-index 来控制层叠顺序的情况。
5.2 避免过度使用 z-index
尽量通过合理的 HTML 结构和 CSS 布局来实现元素的层叠效果，减少对 z-index 的依赖。如果必须使用 z-index，要使用有意义的值，并且尽量避免使用过大或过小的值。
5.3 考虑兼容性
不同的浏览器对层叠上下文和 z-index 的支持可能会有一些差异。在开发过程中，要进行充分的测试，确保页面在各种浏览器中都能正确显示。
六、文章总结
层叠上下文是网页开发中一个重要的概念，它决定了元素在页面中的层叠显示顺序。z-index 是控制元素在层叠上下文中层级的关键属性，但它的作用依赖于层叠上下文。我们需要深入理解层叠上下文的创建规则以及 z-index 与定位元素、负值层级之间的关系，才能在实际开发中正确地应用它们。在应用场景方面，层叠上下文和 z-index 常用于导航栏、弹出框等需要层叠效果的地方。同时，我们也要注意它们的优缺点以及使用过程中的注意事项，以确保代码的可维护性和兼容性。
评论
围绕“层叠上下文创建规则深层解析：为什么z-index即使设置成极大值仍然被遮盖，深入理解层叠顺序、定位元素与负值层级之间的微妙关系。”参与讨论