如何让Toast提示框层级高于DaisyUI Modal对话框？

问题场景 #

结合使用DaisyUI的Modal（基于原生<dialog>）与svelte-toast提示框时，全局Toast提示框会被Modal对话框遮挡，无法显示在上方。尝试调整z-index、组件位置，以及用浏览器调试工具排查后仍未解决，仅在拖拽Modal位置时Toast会临时显示在上方。

解决方案 #

添加以下CSS代码，强制提升svelte-toast容器的层级：

.svelte-toast {
  z-index: 2147483647 !important;
}

将这段代码添加到页面的<style>标签中即可生效，修改后的完整示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layer test</title>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.3/dist/full.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>  
  <!-- Load `toast` and `SvelteToast` into global scope  -->
  <script src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast@0.9.5"></script>
</head>

<body>

<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <button class="btn btn-primary" onclick="toast.push('Alert!', {  initial: 0 })">Trigger alert!</button>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

<script>
    const toastApp = new SvelteToast({
      target: document.body,
      props: {
        options: {
            reversed: true,
            intro: { y: 192 },
        }
      }
    })
</script>

<style>
    /* Style to put alerts in bottom middle. */
    :root {
        --toastContainerTop: auto;
        --toastContainerRight: auto;
        --toastContainerBottom: 1rem;
        --toastContainerLeft: calc(50vw - 8rem);
    }
    /* 新增：提升Toast层级 */
    .svelte-toast {
      z-index: 2147483647 !important;
    }
</style>
</body>

</html>

原因说明 #

原生<dialog>调用showModal()方法后，会被浏览器置于顶层堆叠上下文（top-layer），这个特殊层级的优先级远高于普通元素的堆叠上下文。svelte-toast默认的z-index值不足以穿透这个层级，因此需要设置CSS允许的最大z-index值（2147483647），确保Toast容器始终显示在所有内容之上。

你提到拖拽Modal后Toast恢复正常，是因为拖拽操作触发了浏览器的重排与重绘，临时重新计算了元素的堆叠层级，但这不是稳定的解决方案，直接设置高z-index才是根本解决办法。

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