z-index 是 CSS 中一个控制定位元素层叠顺序的属性。它只能应用在已定位元素上，即 position 属性值为 relative、absolute 或 fixed 的元素。
z-index 属性的取值是一个整数，数值越大表示在层叠上越靠上面。如果两个元素的 z-index 值相同，它们将按照 HTML 中的顺序层叠。
需要注意的是，z-index 属性只能在定位元素的层内起作用。也就是说，如果某个元素的 z-index 值很大，但它的父元素 z-index 值更小，那么该元素还是会被其父元素所覆盖。
以下是css z-index 的语法示例：
selector {
z-index: number;
}
其中 selector 是 CSS 选择器，number 是 z-index 属性的整数取值。
下面是一个简单的 z-index 实例，展示了如何控制元素的层叠顺序。
HTML+CSS实例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
background-color: #fff;
}.box1 {
top: 50px;
left: 50px;
z-index: 1;
}.box2 {
top: 75px;
left: 75px;
z-index: 2;
}.box3 {
top: 100px;
left: 100px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1">
Box 1
</div>
<div class="box box2">
Box 2
</div>
<div class="box box3">
Box 3
</div>
</body>
</html>
在这个例子中，我们使用了三个具有不同 z-index 值的定位元素，它们分别是 box1、box2 和 box3。由于 box3 的 z-index 值最大，因此它在层叠顺序上位于最上面，而 box1 则位于最下面。
可以看到，box1 被 box2 所覆盖，而 box2 被 box3 所覆盖，它们的层叠顺序是根据它们的 z-index 值来决定的。