jQuery 设置z-index
1. 什么是z-index？
在学习和使用 jQuery 的过程中，你可能会遇到一些关于 z-index 的问题。z-index 是 CSS 的一个属性，用于控制元素在层叠顺序中的显示优先级。通过设置不同的 z-index 值，我们可以改变元素的显示顺序，使某个元素显示在其他元素之上或之下。
2. CSS 中的 z-index 属性
在 CSS 中，z-index 属性的取值为整数，默认为 auto。z-index 的值越大，元素显示在越上层。如果两个元素具有相同的 z-index 值，那么它们的显示顺序将会按照它们在 HTML 文档中的先后顺序来确定。z-index 属性只对定位元素（position 值为 absolute、fixed 或 relative）起作用。
下面是一个简单的 HTML 示例，其中包含两个定位元素，我们将通过 jQuery 来设置它们的 z-index 值。
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
首先，我们在 CSS 中设置这两个元素的样式，使其具有定位属性。
.box1, .box2 {
position: relative;
width: 200px;
height: 200px;
background-color: gray;
border: 1px solid black;
}
接下来，我们使用 jQuery 来设置它们的 z-index 值。首先，我们需要在 HTML 文件中引入 jQuery 库。
<script src="
然后，在一个 <script> 标签中编写 jQuery 代码。
$(document).ready(function() {
$('.box1').css('z-index', '2');
$('.box2').css('z-index', '1');
});
以上代码将设置 .box1 的 z-index 为 2，.box2 的 z-index 为 1。这意味着 .box1 将显示在 .box2 之上。
3. jQuery 中的操作方法
除了使用 .css() 方法直接设置 z-index 值之外，jQuery 还提供了一些其他的操作方法，便于我们更灵活地控制元素的显示顺序。
3.1. .addClass() 方法
我们可以使用 .addClass() 方法给元素添加类，然后在 CSS 中通过类来设置 z-index 值。
$(document).ready(function() {
$('.box1').addClass('higher');
$('.box2').addClass('lower');
});
在 CSS 中，我们定义 .higher 类和 .lower 类，并为它们设置不同的 z-index 值。
.higher {
z-index: 2;
}
.lower {
z-index: 1;
}
3.2. .toggleClass() 方法
如果我们需要在点击事件中切换元素的 z-index 值，可以使用 .toggleClass() 方法来动态添加和移除类。
$(document).ready(function() {
$('.box1').click(function() {
$(this).toggleClass('higher');
});
$('.box2').click(function() {
$(this).toggleClass('higher');
});
});
上述代码中，当点击 .box1 或 .box2 元素时，它们将交替地添加和移除 .higher 类，从而改变它们的 z-index 值。
3.3. .css() 方法
如果我们只是临时改变一个元素的 z-index 值，可以使用 .css() 方法。
$(document).ready(function() {
$('.box1').mouseover(function() {
$(this).css('z-index', '3');
});
$('.box1').mouseout(function() {
$(this).css('z-index', '2');
});
});
在上述代码中，当鼠标悬停在 .box1 元素上时，它的 z-index 值将变为 3，鼠标离开时恢复为 2。
4. 状态图
下面是一个用 mermaid 语法标识的状态图，展示了一个元素的 z-index 值的不同状态。
stateDiagram
[*] --> Normal
Normal --> Higher
Normal --> Lower
Higher -->
