skip to Main Content
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


  1. 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. 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