Css 为什么会有"；z指数；被忽视了吗？元素只是部分向前移动

正如大家在这段代码中看到的，当我将鼠标悬停在某个

元素上时，该元素没有重叠。我的意思是，至少，不完全。是的，顶部朝前，但底部不朝前。我不知道为什么。 我的意思是，为了解决这个问题，我特别在下面写了这段代码：

ul li:hover{
z-index: 10;}

所以它应该朝前飞，但它没有。有人知道为什么吗？

body，html{
身高：100%；
保证金：0；
}
保险商实验室{
列表样式类型：无；
}
ulli{
显示：网格；
边界半径：0.5雷姆；
填充：1rem；
光标：指针；
变换：rotateY（-22度）rotateX（7度）；
边框底部：4倍实心rgba（0,0,0,0.2）；
对齐项目：居中；
}
ulli p{
填充：1rem；
}
李先生1{
背景色：rgba（37187112）；
颜色：白色；
z指数：1；
}
李先生2{
背景色：rgb（154169168）；
颜色：白色；
字号：500；
z指数：1；
}
李先生3{
背景色：rgb（89188224）；
颜色：白色；
z指数：1；
}
ulli：悬停{
变换：rotateY（0）rotateX（3deg）标度（1.1）；
转型：转型。4s放松；
z指数：10；
}

文件


佩朗茨克普雷蒂姆乌兰科帕乌兰科帕。埃涅阿斯·奎斯·阿库姆·厄洛斯。乌贼



佩朗茨克普雷蒂姆乌兰科帕乌兰科帕。埃涅阿斯·奎斯·阿库姆·厄洛斯。乌贼



佩朗茨克普雷蒂姆乌兰科帕乌兰科帕。埃涅阿斯·奎斯·阿库姆·厄洛斯。乌贼

z-index

仅适用于非静态定位元件。只需为

li

添加

position:relative

。 下面是一个工作示例

（我还将

转换

从

：hover

样式移到了常规样式，因此转换可以在两个方向上工作-缩放和缩回）

body，html{
身高：100%；
保证金：0；
}
保险商实验室{
列表样式类型：无；
}
ulli{
显示：网格；
边界半径：0.5雷姆；
填充：1rem；
光标：指针；
变换：rotateY（-22度）rotateX（7度）；
边框底部：4倍实心rgba（0,0,0,0.2）；
对齐项目：居中；
位置：相对位置；
转型：转型。4s放松；
}
ulli p{
填充：1rem；
}
李先生1{
背景色：rgba（37187112）；
颜色：白色；
z指数：1；
}
李先生2{
背景色：rgb（154169168）；
颜色：白色；
字号：500；
z指数：1；
}
李先生3{
背景色：rgb（89188224）；
颜色：白色；
z指数：1；
}
ulli：悬停{
变换：rotateY（0）rotateX（3deg）标度（1.1）；
z指数：10；
}

文件


佩朗茨克普雷蒂姆乌兰科帕乌兰科帕。埃涅阿斯·奎斯·阿库姆·厄洛斯。乌贼



佩朗茨克普雷蒂姆乌兰科帕乌兰科帕。埃涅阿斯·奎斯·阿库姆·厄洛斯。乌贼



佩朗茨克普雷蒂姆乌兰科帕乌兰科帕。埃涅阿斯·奎斯·阿库姆·厄洛斯。乌贼

这是因为

rotateX

。您应该为

悬停

保留一个

translateZ

z-index

在3D中没有效果，只需将位置属性添加到

li