Question 331951 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make close button stay top right of a native <dialog> (sticky/fixed not working)

In the below image, you can see the red close button is scrolling out of view (should always remain top right).
I thought no problem, I will fix it with position: fixed … then it’s positioned relative to the body, ok how about position: sticky, also did not work. Seems like only absolute position works within a dialog, so weird.

enter image description here

LOREM.innerText = "Lorem Ipsum my latin is not so great. ".repeat(400);
#DIALOG {
  position: relative;
  overflow-y: auto;
  max-height: 80vh;
  max-width: 80vw;
}

#CLOSE {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-color: red;
}
<dialog open id="DIALOG">
  <button id="CLOSE">X</button>
  <div id="LOREM"></div>
</dialog>
Tags:

2

Answers


  1. 0

    Sticky is working. See this

    document.querySelector("#LOREM").innerText = "Lorem Ipsum my latin is not so great. ".repeat(400);
    #DIALOG {
  position: relative;
  overflow-y: auto;
  max-height: 80vh;
  max-width: 80vw;
}

#CLOSE {
  position: sticky;
  top: 0;
  left: 95%;
  width: 32px;
  height: 32px;
  background-color: red;
}
    <dialog open id="DIALOG">
  <button id="CLOSE">X</button>
  <div id="LOREM"></div>
</dialog>
    Login or Signup to reply.
  2. 0

    If you want to put one element on top of another why don’t you wrap the two element in a wrapper and use position: relative and position: absolute in child elements.

    Here is an example:

    LOREM.innerText = "Lorem Ipsum my latin is not so great.".repeat(400);
    #DIALOG {
  overflow-y: auto;
  max-height: inherit;
  max-width: inherit;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  max-height: 80vh;
  max-width: 80vw;
}

#CLOSE {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-color: red;
  display: block;
  z-index: 999;
}
    <div class="wrapper">
  <button id="CLOSE">X</button>
  <dialog open id="DIALOG">
    <div id="LOREM"></div>
  </dialog>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search