HTML <dialog>内图标被::backdrop遮挡的解决方法问询

问题根源是堆叠层级冲突：你的图标因超出<dialog>边界，被::backdrop伪元素覆盖。以下是两种可行的解决方式：

方法一：提升图标堆叠层级（推荐） #

给.icon添加z-index: 1，同时为<dialog>设置position: relative，让图标相对于<dialog>定位的同时，在<dialog>的局部堆叠上下文里处于上层。

修改后的完整代码：

dialog::backdrop {
  backdrop-filter: blur(1px);
}

dialog {
  min-width: 400px;
  min-height: 100px;
  position: relative; /* 建立局部堆叠上下文 */
}

.icon {
  background-color: blue;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  top: -2rem;
  left: 1rem;
  z-index: 1; /* 提升图标层级，避免被backdrop遮挡 */
}

.dialog-actions {
  text-align: right;
}

<button onclick="window.dialog.showModal();">open dialog</button>

<dialog id="dialog">
  <div class="icon"></div>
  <form method="dialog">
    <div class="dialog-actions">
      <button>close</button>
    </div>
  </form>
</dialog>

方法二：调整::backdrop层级（不推荐） #

给dialog::backdrop设置z-index: -1，让它退到图标后方。但这种方式可能打乱页面其他元素的堆叠关系，风险较高，不建议使用。

原理说明 #

<dialog>调用showModal()后，::backdrop是全屏伪元素，其默认堆叠层级与<dialog>关联。当图标超出<dialog>可视区域时，默认层级会低于::backdrop。通过给<dialog>设置position: relative建立局部堆叠上下文，再提升图标z-index，就能让图标在<dialog>内容层级中优先显示，避开::backdrop的遮挡。

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