将元素置于模态背景之上

Question

我正在尝试为我的应用程序构建指南功能。 作为此功能的一部分，预计工具提示会显示在目标 HTML 元素旁边，并且此目标元素会出现在与工具提示一起出现的模态背景之上。

问题是，经过大量努力，我仍然无法在模态背景上显示 HTML 元素。 像z-index: 10000;important: position: relative这样的简单技巧没有帮助。 此外，通过在 Firefox 开发人员工具中禁用父元素的 z-index 来更改父元素的z-index （并保留z-index: 10000;important: position: relative对于应该位于模态背景顶部的目标元素）也无济于事。

应用程序的 HTML 非常复杂，包含许多元素。 但是我希望能够“突出显示”任何给定的元素，方法是把它放在模态叠加层的顶部，只知道它的 id。 有没有一种简单的方法可以用 JavaScript/React 做到这一点？

希望有一种方法可以在不修改 DOM 的情况下做到这一点，这将是非常可取的。

UPD：代码演示- 按帽子按钮显示指南/工具提示

Answer 1

从.form-wrapper中删除 z-index 并为目标元素应用相对 position 和 z-index。

我通过添加来做到这一点

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

到 App.js@77

还将 class 添加到 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