Javascript 为什么z-index不能在Chrome中使用CSS列？

使用

列计数创建的多列布局的
z-index
有问题。我想用
.animate（）
将单击的div移到列表顶部，但当我单击右列的元素时，它会移到左列元素的后面。这在Firefox上运行良好，但在Chrome上不起作用

有什么想法吗


函数gotoTop（元素）{
var destinationTop=$（'.categories'）.offset（）.top；
var elementOffsetTop=$（element）.offset（）.top；
var distanceTop=（elementOffsetTop-destinationTop）；
返回距离上限；
}
函数gotoLeft（元素）{
var destinationLeft=$（'.categories'）.offset（）.left；
var elementOffsetLeft=$（element）.offset（）.left；
var distanceLeft=（elementOffsetLeft-destinationLeft）；
返回距离左；
}
$（'.category'）。在（'click'，函数（）{
$（this.css（'position'，'relative'）；
$（this.css（'z-index'，'9999'）；
$（this.sides（）.css（'z-index'，'10'）；
$（此）。设置动画({
顶部：'-'+gotop（this）+'px'，
左：'-'+gotoLeft（this）+'px'
}, 2000
);
});
.categories{
宽度：500px；
字体大小：12px；
-moz列数：2；
-webkit列数：2；
列数：2；
-moz柱间距：7px；
-webkit柱间隙：7px；
柱间距：0px；
背景：灰色；
}
.类别{
列表样式：无；
左侧填充：0；
显示：内联块；
宽度：100%；
最小高度：26px；
左边框：1个黑色凹槽；
光标：指针；
-webkit列内部中断：避免；
边框底部：2个凹槽#666；
字体大小：13px；
右边框：1px实心#000；
背景：黑色；
颜色：白色；
}


第一组


第2组


第3组


第4组


第5组


第6组


第7组


第8组


第9分部


第10组


第11分部


第12分部


第13分部


第14分部


第15分部


第16分部


第17分部


第18分部

我认为这根本不可能。因为正如你所看到的，右边的元素在整个左列后面

我不知道
column count
在DOM中是如何工作的，但我认为它创建了两个部分（您的两个列），所有这些
都是该列的子列，并且这些列不能相互重叠。对于
z-index
，如果元素B位于元素A的顶部，那么元素A的子元素永远不会高于元素B。我认为这是一种情况

在这里，我创建了一个索引，以便您可以更好地查看似乎Chrome为每个列创建了一个单独的层，而您无法控制它的
z-index
。我建议使用CSS3列代替此解决方案：



函数gotoTop（元素）{
var destinationTop=$（'.categories'）.offset（）.top；
var elementOffsetTop=$（element）.offset（）.top；
var distanceTop=（elementOffsetTop-destinationTop）；
返回距离上限；
}
函数gotoLeft（元素）{
var destinationLeft=$（'.categories'）.offset（）.left；
var elementOffsetLeft=$（element）.offset（）.left；
var distanceLeft=（elementOffsetLeft-destinationLeft）；
返回距离左；
}
$（'.category'）。在（'click'，函数（）{
$（this.css（'position'，'relative'）；
$（this.css（'z-index'，'9999'）；
$（this.sides（）.css（'z-index'，'10'）；
$（此）。设置动画({
顶部：'-'+gotop（this）+'px'，
左：'-'+gotoLeft（this）+'px'
}, 2000);
});
.categories{
宽度：500px；
高度：500px；
字体大小：12px；
显示：-webkit flex；
显示器：flex；
-webkit flex流：列换行；
柔性流：柱包裹；
背景：灰色；
}
.类别{
列表样式：无；
左侧填充：0；
显示：内联块；
宽度：240px；
最小高度：26px；
左边框：1个黑色凹槽；
光标：指针；
-webkit列内部中断：避免；
边框底部：2个凹槽#666；
字体大小：13px；
右边框：1px实心#000；
背景：黑色；
颜色：白色；
}


第一组


第2组


第3组


第4组


第5组


第6组


第7组


第8组


第9分部


第10组


第11分部


第12分部


第13分部

$(this).css('transform','translateZ(1px)');
$(this).siblings().css('transform','translateZ(0px)');