section {
position: relative;
width: 500px;
height: 500px
}
dialog {
width: 400px;
height: 400px;
background: #ccc;
}
.box {
z-index: 888;
position: absolute;
top: 10px;
left: 10px
}
<section>
<dialog>
<p>Text</p>
</dialog>
<div class="box"></div>
</section>
I want the div to be on top of the dialog, so I set the z index high, but it doesn’t seem to work at all. Any way to make the div
appear on top layer ?
2
Answers
Essentially , the dialogue element is not affected by z index since it is set strictly by the order by which the elements are added , kinda like an alert in JS which pop ups an alert window
Ill personally refer from using it ( dialog element ) and instead just create a div overlay
It is already on the top layer. If you add the
open
attribute then you can see it.