如何让原生<dialog>的关闭按钮固定在右上角？sticky/fixed失效

红色关闭按钮随内容滚动出视野（本该始终固定在右上角）。尝试position: fixed时按钮相对于body定位；position: sticky无效，仅position: absolute在dialog内有效，情况异常。

问题示意图：红色关闭按钮位于对话框右上角，当对话框内容滚动时，按钮随内容一起移出视野。

原代码示例 #

HTML #

<dialog id="DIALOG">
  <button id="CLOSE">X</button>
  <div id="LOREM"></div>
</dialog>

CSS #

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

JS #

LOREM.innerText = "Lorem Ipsum my latin is not so great. ".repeat(400);
DIALOG.showModal();

解决方案 #

核心是分离对话框的定位容器与滚动区域，让关闭按钮固定在对话框容器上，不受内容滚动影响。

修改后的代码 #

HTML

<dialog id="DIALOG">
  <button id="CLOSE">X</button>
  <div id="CONTENT_WRAPPER">
    <div id="LOREM"></div>
  </div>
</dialog>

CSS

#DIALOG {
  position: relative;
  max-height: 80vh;
  max-width: 80vw;
  /* 移除自身的overflow，由内部容器处理滚动 */
}

#CONTENT_WRAPPER {
  overflow-y: auto;
  max-height: calc(80vh - 40px); /* 预留按钮空间，避免内容被遮挡 */
  padding-right: 8px; /* 可选：避免内容右侧被滚动条遮挡 */
}

#CLOSE {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-color: red;
  z-index: 1; /* 确保按钮在内容上方 */
  border: none;
  cursor: pointer;
}

JS

LOREM.innerText = "Lorem Ipsum my latin is not so great. ".repeat(400);
DIALOG.showModal();

// 可选：添加关闭按钮功能
CLOSE.addEventListener('click', () => {
  DIALOG.close();
});

关键说明 #

• 对话框(#DIALOG)作为position: relative的定位容器，关闭按钮的absolute定位基于对话框本身，不会随内容滚动。
• 将滚动逻辑转移到内部的#CONTENT_WRAPPER，内容滚动时按钮保持固定在对话框右上角。
• 若坚持使用position: fixed，需通过JS动态计算对话框的视口位置来设置按钮坐标，但结构调整的方案更简洁可靠。

内容的提问来源于stack exchange，提问作者run_the_race