Question 208620 in Html Question posted in
Some basic documentation can be found here.

why html dialog is always on top?

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 ?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    It is already on the top layer. If you add the open attribute then you can see it.

    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 open>
    <p>Text</p>
  </dialog>
  <div class="box">I am on the top layer. See?</div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search