將元素置於模態背景之上

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