Позиционирование элемента с помощью диалогового/модального CSS ⇐ CSS

[Anonymous]

Можно ли разместить элемент поверх модального диалогового окна, который не является прямым дочерним элементом диалогового окна html/css/javascript?
Когда я использую предоставленный элемент диалогового окна html как модальное окно с помощью javascript/jquery showModal() и close(). Кажется, я не могу разместить какие-либо элементы поверх диалога или фона диалога, независимо от того, насколько высоко я установил z-index. Есть ли способ сделать это? Ниже приведена упрощенная версия проблемы:

Код: Выделить всё

const dialog = $("#dialog");
const openDialogBtn = $("#openDialog");
const closeDialogBtn = $("#closeDialog");

openDialogBtn.on("click", function() {
dialog[0].showModal();
});

closeDialogBtn.on("click", function() {
dialog[0].close();
});

Код: Выделить всё

.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;
}

Код: Выделить всё

should be above/on top of dialog
open

close
dialog

Подробнее здесь: https://stackoverflow.com/questions/787 ... -modal-css