为什么css position：fixed不适用于dialog标签？

cqoc49vn 于 2023-04-22 发布在其他

关注(0)|答案(1)|浏览(166)

我开始制作一个cookie横幅。为了尽可能地简化我的问题，我在w3schools tryit编辑器中粘贴了以下内容：

<dialog open style="position:fixed;right:0;">
  <button>Decline</button>&nbsp;
  <button>Allow cookies</button>
</dialog>

预期结果：它应该位于视口的右侧。实际结果：对话框在视口中居中。
当我编辑上面使用div而不是dialog时，它会按预期工作：

<div style="position:fixed;right:0;">
  <button>Decline</button>&nbsp;
  <button>Allow cookies</button>
</div>

将按其应有的方式移至视口右侧。
如何从HTML5对话框标签中获取此行为？
感谢所有的好工作的人在这里做。

css

来源：https://stackoverflow.com/questions/76078886/why-does-css-positionfixed-not-work-for-the-dialog-tag

1条答案

按热度按时间

fwzugrvs1#

body {
  margin: 0;
  /* for testing */
  min-height: 200vh;
}

dialog {
  position: fixed;
  right: 0;
  margin: unset;
  inset-inline-start: unset;
}

<dialog open>
  <button>Decline</button>&nbsp;<button>Allow cookies</button>
</dialog>

事实上，你可以使用right: 0;，因为浏览器样式都有inset-inline-end: 0;，但我不是100%确定所有的浏览器都有。

赞(0）回复(0）举报 2023-04-22

我来回答

为什么css position：fixed不适用于dialog标签？

1条答案

相关问题

热门标签

最新问答