将元素置于模态背景之上答案

【问题标题】：Bring element on top of modal backdrop将元素置于模态背景之上
【发布时间】：2021-11-18 22:00:07
【问题描述】：

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

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

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

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

UPD: Code demo - 按帽子按钮显示指南/工具提示

【问题讨论】：

我在同一条船上。目前正在阅读此堆栈帖子stackoverflow.com/questions/2941189/…
你想实现这样的事情吗？ introjs.com
这通常很容易@altern，但首先你能分享一下你已经得到的吗？
@AliYaghoubi：introjs 看起来非常好，但我试过了，但它对我不起作用 - 无法访问正在突出显示的 HTML 元素。例如，我有一个希望用户单击并填写字段的按钮，但它们似乎无法访问
@altern 你也可以使用Sweetalert: sweetalert2.github.io/#input-types

标签： javascript html css reactjs

【解决方案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 类。

工作演示：https://codesandbox.io/s/tooltip-z-index-forked-fg9pt

【讨论】：

我设置背景颜色只是为了验证工具提示的正确元素，当然最终结果不需要。
由于某种原因，它不适用于第一步（#projectName 输入）。我试图通过应用您的所有建议在我的沙箱中重新创建所需的行为 - 它不起作用。也许你忘了提及你做过的其他事情？
@altern 将我的 sandbos css 文件与您的比较，正如提到的问题是元素上的 z-index 使用。此外，第一步不起作用，因为该类没有正确设置，我只是尝试了工具提示功能的下一步，以带来第四个工作示例