添加变换/动画元素会导致工具提示与其他元素重叠

Question

我有一个HTML页面的工作布局，但是当我尝试向其添加一些动画时，它导致工具提示与页面中的其他元素重叠。

我创建了一个简单的小提琴，它非常接近地复制了我的设置： https://jsfiddle.net/y5bk4utg/

删除以下行：

animation: 0.3s ease var(--delay) 1 slideInFromLeft;
transform: translateX(-100%);
animation-fill-mode: forwards;

从 .group 会导致工具提示再次正确显示。

我用谷歌搜索过，似乎问题是翻译/转换属性导致每个"组"元素都有自己的堆叠上下文。但是，当我尝试遵循其他线程中发布的解决方案时，我无法解决问题。总的来说，我对HTML/CSS很陌生，所以很可能我没有正确实施修复程序。有人可以给我一些指导吗？

谢谢你的帮助。

Answer 1

看起来像一个z-index问题。您将它们全部设置为工具提示div 本身上的正确 z 索引，但容器div 需要具有适当的值才能使它们正确重叠 - 您没有，因此它们只是推到下一个父div 后面。

由于已添加内联样式，因此可以添加：

<div class="group" style="--delay:.2s; z-index:3"></div>
<div class="group" style="--delay:.4s; z-index:2"></div>
<div class="group" style="--delay:.6s; z-index:1"></div>

通过按顺序减小值，可以将悬停的div 下方的工具提示重叠。这不是动态的，如果工具提示发生更改，以便它应该从父级的顶部推出，它将中断，您将获得相同的结果。

一个更动态的解决方案是：

.group:hover {
z-index:999;
}