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

Question

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

我创建了一个简单的 fiddle ，它非常接近地复制了我的设置: 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-index，但容器 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 下方。这不是动态的，如果工具提示发生变化，它应该从父级的 top 中推出，它就会中断，您将得到相同的结果。

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

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