javascript - 将元素置于模态背景之上

Question

我正在尝试为我的应用程序构建一个指南功能。作为此功能的一部分，应在目标 HTML 元素旁边显示工具提示，并将此目标元素置于与工具提示一起出现的模式背景之上。
问题是，经过大量努力后，我仍然无法让 HTML 元素显示在模态背景之上。简单的技巧，如 z-index: 10000 !important; position: relative不要帮助。同时更改父元素的 z-index通过在 Firefox 开发人员工具中禁用它(并为应该位于模态背景顶部的目标元素留下 z-index: 10000 !important; position: relative)并没有帮助。
应用程序的 HTML 非常复杂，包含许多元素。但是我希望能够“突出显示”任何给定的元素，方法是将它放在仅知道其 ID 的模态叠加层之上。有没有一种简单的方法可以用 JavaScript/React 做到这一点？
希望有一种方法可以在不修改 DOM 的情况下做到这一点，这将是非常可取的。
更新: Code demo - 按帽子按钮显示指南/工具提示

Answer 1

从 .form-wrapper 中删除 z-index并为目标元素应用带有 z-index 的相对位置。
我通过添加来做到这一点

d.classList.add("tooltip-active-element");

到 App.js@77
还将类添加到 css 文件中:

.tooltip-active-element {
  position: relative;
  z-index: 2;
  background: red;
}

并从其他类中删除了 z-index 值，关键是 .form-wrapper类(class)。
工作演示:https://codesandbox.io/s/tooltip-z-index-forked-fg9pt