[HTML] dialogを画面中央ではなく上に寄せる

問題

HTMLのdialog要素をshowModal()で表示すると、画面中央に来ます。

上に持ってきたいのですが、どうするとよいでしょうか。

答え

デフォルトで、dialogの全方位で ｍrgin:auto; となっている。

上のmarginを指定して狭めてやると、上に移動できる。

dialog {
  margin-top:10px;
}

デフォルトの表示

dialogのmargin-topを指定した例

別解

position:fixed のほうが確実という説もある。

dialog {
  position: fixed;
  top:10px;
  margin-top:0;
}