我創(chuàng)建了一個開發(fā)工具，并使用z-index位于所有其他元素之上:

.devTool {
  position: fixed;
  z-index: 99999;
}

不幸的是，這打破了一次模態(tài)& ltdialog/>；元素在模式模式下打開。

用戶不再能夠與. devTool進行交互。

原因是新的#頂層概念位于所有元素之上: https://developer.chrome.com/blog/what-is-the-top-layer/

有沒有辦法確保我的devTool總是在所有元素之上(即使那些是模態(tài)對話框)并保持交互？

據我所知，這是不可能的。來自W3C規(guī)范草案:

注意:頂層完全由用戶代理管理；它不能被作者直接操縱。

唯一的方法似乎是使用在頂層渲染的元素...也許吧。devTools本身可以包裝在一個& lt對話框& gt作為最后一個元素放置？來自相同的規(guī)格:

頂層元素按照它們在頂層中出現的順序呈現；頂層中的最后一個元素呈現在所有其他元素之上。

還要記住，您的解決方案可能會因為另一個原因而失敗:z索引值是相對于堆疊上下文的，因此較高堆疊上下文中較小的z索引值可能會位于您的元素之上。