css - 是否可以将 div 放置在不是其父级的 标签之上？

Question

<dialog>标签，当用 showModal() 打开时, 将显示它和它的结束标记之间的元素，同时禁用页面上的所有其他元素。我的问题是:是否可以针对特定元素覆盖此行为？示例:

HTML:

<div id="container">
  <dialog id="myDialog">
    <button id="close" type="reset">Close</button>
    <button id="create">Add Element</button>
  </dialog>
</div>

<menu>
  <button id="openButton">Open Dialog</button>
</menu>

CSS:

.new-element {
  width: 50px;
  height: 50px;
  border: 3px solid black;
  background-color: blue;
  position: fixed;
  top: 50%;
}

JS:

const container = document.getElementById('container');
const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('close');
const createButton = document.getElementById('create');
const myDialog = document.getElementById('myDialog');

openButton.addEventListener('click', function() {
  myDialog.showModal();
});

closeButton.addEventListener('click', function() {
  myDialog.close();
});

createButton.addEventListener('click', function() {
  const div = document.createElement('div');
  div.classList.add('new-element')
  container.appendChild(div);
});

在 JSFiddle 中:https://jsfiddle.net/y7bkxvd4/

我想找到一种方法将蓝色方 block 放在对话框的顶部。我意识到将新的 div 附加到对话框本身会容易得多，但我在溢出是一个问题并且使用使用 react-portal 的模块的情况下遇到了这个问题。如果不可能，很好，我可以支持它。但如果是的话，我想知道。

z-index显然没有影响。

Answer 1

<dialog>元素被添加到 dom 的“顶层”，它有自己的堆叠顺序(z-index 对此没有影响——它严格按照添加元素的顺序设置)。我不相信你可以手动将元素添加到这个顶层，它是在 showModal() 等函数中完成的。您可以在以下位置找到更多信息:https://fullscreen.spec.whatwg.org/#new-stacking-layer但由于该功能仍未得到普遍支持，因此很难找到有关它的文档。例如:

To remove an element from a top layer, remove element from top layer.

真正有帮助..

一些解决方法:

• 将添加的元素也更改为对话框并调用 .showModal()追加元素时。这种方法的问题是 .showModal()使该元素之外的所有元素都不可用于用户交互。这意味着您的蓝色框在顶部，但这也意味着您不能在其他模式上单击“关闭”或“添加元素”。 (注意:您还会注意到“关闭/添加元素”对话框变灰了——您可以通过更改 .new-element::backdrop{...} 来覆盖它，但它仍然不会改变您不能单击“关闭”或“添加元素") 示例 here (移除背景)

• 将添加的元素更改为对话框，调用.show()附加元素时，将“打开对话框”的单击事件更改为 .show()而不是 .showModal .这允许您还可以单击蓝色框(即使它在“顶部”)，但它也允许您单击页面上的任何位置(有点违背模态的目的)。 ::backdrop伪元素也不可用，因为您没有使用 .showModal如果采用这种方法，则需要将关闭蓝色框附加到“关闭”单击事件处理程序。 示例 here

我的建议是使用模态插件(例如 Bootstrap 的)或使用您想要的功能制作自己的插件(使用 Javascript)。对话在技术上是体验式技术，因此尝试立即获得您想要的行为并不容易。 This可能会尽可能接近，尽管您可以通过添加自己的“背景”来改进它。