是否可以将一个元素放置在不是对话框 html/css/javascript 直接子级的对话框模式之上。
当我使用 html 提供的对话框元素作为带有 showModal() 和 close() javascript/jquery 的模式时。无论我将 z-index 设置多高，我似乎都无法将任何元素放置在对话框或对话框背景的顶部。有没有办法做到这一点？以下是问题的简化版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.onTop {
top: 10px;
right: 10px;
z-index: 1000;
background-color: yellow;
padding: 10px;
}
dialog::backdrop {
z-index: 999;
background-color: rgb(0,0,0,0.8);
}
dialog {
z-index: 998;
}
</style>
</head>
<body>
<div class="onTop" open>should be above/on top of dialog</div>
<button id="openDialog">open</button>
<dialog id="dialog">
<button id="closeDialog">close</button>
dialog
</dialog>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const dialog = $("#dialog");
const openDialogBtn = $("#openDialog");
const closeDialogBtn = $("#closeDialog");
openDialogBtn.on("click", function() {
dialog[0].showModal();
});
closeDialogBtn.on("click", function() {
dialog[0].close();
});
</script>
</body>
</html>
你不能使用已经固定的 z 索引， 和对话框标签通过使用边距居中，所以你只需要减少你想要放置的方向的边距，在你的情况下，对话框是边距顶部：0;