Javascript 具有多个层的css z索引

我经常使用z索引

它确实解决了很多问题

我知道在应用z索引之前我需要先定位

如果我不给父节点放一个较低的索引

它应该总是起作用吗

这是我面临的问题

（函数（）{
"严格使用",；
对于（变量i=0；i<60；i++）{
var dot=document.createElement（'span'）；
document.querySelector（'body'）.appendChild（dot）；
}
var dot=document.queryselectoral（'span'），
deg=45；
对于（var j=0；j
span{
高度：200px；
宽度：200px；
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（45度）；
}
跨度：之后{
光标：指针；
内容：“；
高度：15px；
宽度：15px；
背景：金；
显示：块；
边界半径：50%；
过渡：0.3s缓进缓出；
位置：绝对位置；
顶部：0px；
左：0px；
}
.span动画：之后{
高度：8px；
宽度：8px；
z指数：100；
}
问题在于这些元素正在覆盖它们自己。将它们变小，并使用
变换原点
为它们提供变换的起点


（函数（）{
"严格使用",；
对于（变量i=0；i<60；i++）{
var dot=document.createElement（'span'）；
document.querySelector（'body'）.appendChild（dot）；
}
var dot=document.queryselectoral（'span'），
deg=45；
对于（var j=0；j
span{
高度：150像素；
宽度：8px；
位置：绝对位置；
最高：50%；
左：50%；
变换原点：底部；
变换：平移（-50%，-50%）旋转（45度）；
}
跨度：之后{
光标：指针；
内容：“；
高度：15px；
宽度：15px；
背景：金；
显示：块；
边界半径：50%；
过渡：0.3s缓进缓出；
位置：绝对位置；
顶部：0px；
左：0px；
}
.span动画：之后{
高度：8px；
宽度：8px；
z指数：100；
}
pol的解决方案确实有效，thx很多

但正如你提到的，我无法访问它们，因为它们是重叠的


（函数（）{
"严格使用",；
对于（变量i=0；i<60；i++）{
var dotContainer=document.createElement（'span'）；
var dot=document.createElement（'span'）；
var d=document.createElement（'span'）；
$（d）.附录（dot）；
$（点）.appendTo（点容器）；
$（dotContainer）.addClass（'dot-container'）；
$（dotContainer.appendTo（'body'）；
};
var dots=$（'.dot container'），
deg=45；
对于（变量i=0；i
.dot容器{
高度：200px；
宽度：200px；
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（45度）；
边框：1px纯红；
}
跨距{
背景：金；
高度：10px；
宽度：10px；
位置：绝对位置；
顶部：0px；
左：0px；
光标：指针；
z指数：100；
}
悬停{
背景：绿色；
}
div{
边框：1px纯红；
}
.a{
高度：100px；
宽度：100px；
背景：rgba（0,0,0,0.1）；
位置：绝对位置；
顶部：0px；
左：0px；
}
.b{
高度：100px；
宽度：100px；
背景：rgba（0,0,0,0.1）；
位置：绝对位置；
顶部：0px；
左：0px；
}
c{
高度：100px；
宽度：100px；
背景：rgba（0,0,0,0.1）；
位置：绝对位置；
顶部：0px；
左：0px；
}
div div{
位置：绝对位置；
高度：10px；
宽度：10px；
z指数：100；
}
div div：悬停{
背景：绿色；
}
a.分区{
背景：红色；
左：0px；
顶部：0px；
}
b.分区{
背景：红色；
右：0px；
顶部：0px；
}
c.分区{
背景：红色；
右：45px；
顶部：0px；
}
我修改了您的代码，使index-z变为变量，但使用您的方法，最后15个元素将始终覆盖前45个元素，因为您在跨度正方形200x200（15*4）的左上部分使用点。因此，只有最后15个元素是可见的

如果将旋转点移动到底部，并将正方形跨距更改为矩形15x200，如下所示：

注意：我使用的是与点相同的（15px）

（函数（）{
"严格使用",；
对于（变量i=0；i<60；i++）{
var dot=document.createElement（'span'）；
document.getElementsByTagName（“正文”）[0].appendChild（点）；
}
var dots=document.queryselectoral（'span'），
deg=45；
var指数=0；
如果（点）{
dots.forEach（函数（元素）{
索引++
setTimeout（animate.bind（null，元素，索引），索引*10）；
});
}
函数设置动画（元素、计数）{
element.style.transform='translate（-50%，-50%）rotate（'+deg+'deg'）；
度+=360/60；
element.classList.add（'span-animate'）；
element.style.zIndex=计数；
}
/*对于（var j=0；j

span{
高度：200px；
宽度：15px；
位置：绝对位置；
最高：50%；
左：50%；
变换原点：底部；
变换：平移（-50%，-50%）旋转（45度）；
}
跨度：之后{
光标：指针；
内容：“；
高度：15px；
宽度