为何CSS position:fixed属性在HTML5 dialog标签中不生效？

问题核心是：HTML5 <dialog> 元素自带浏览器默认的用户代理样式，其中通过 inset: 0 和 margin: auto 实现了居中布局，直接设置 right: 0 无法覆盖这些默认规则，导致它依然居中显示。而 <div> 没有这类默认样式，所以样式能直接生效。

要让dialog实现靠右固定定位，只需覆盖这些默认样式，以下是两种可行方案：

方案1：使用inset属性精准定位 #

通过inset属性（等同于同时设置top/right/bottom/left），将左侧设为auto，并重置margin为0：

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

inset: 0 auto 0 0 表示顶部、底部贴边，右侧自动适配，左侧固定为0，配合margin:0就能让dialog紧贴视口右侧。

方案2：单独重置left和margin #

直接覆盖默认的left值为auto，并清除默认的自动margin：

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

如果需要让dialog底部靠右（更符合Cookie横幅的常见布局），可以调整inset属性：

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

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