ダイアログ内で要素を固定位置表示にする

こんな感じのもの

HTML/CSS

Penなどに貼り付ければ動作確認できます。

<button type="button" id="open">開く</button>

<dialog class="dialog">
  <div class="close">
    <button type="button" id="close">閉じる</button>
  </div>

  <div class="scroll-container"></div>
</dialog>

<script>
  document.getElementById("open").addEventListener("click", () => {
    document.querySelector(".dialog").showModal();
  });

  document.getElementById("close").addEventListener("click", () => {
    document.querySelector(".dialog").close();
  });
</script>

.close {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 0;
}

.scroll-container {
  height: 2000px;
}

.dialog {
  max-height: 250px;
}

説明

要素の固定表示といえば、position: fixedが真っ先に思い浮かびますが、大きさの可変するダイアログ要素内に固定するには苦労します。
そのためここでは、CSSのposition: stickyを使って、固定表示を実現しています。

例では閉じるボタンは上部に固定表示されていますが、下部に固定したい場合

.close {
  top: 100%;
}

.close button {
  translate: 0 -100%;
}

とすることで、下部に固定できます。