如何让MudOverlay组件显示在MudDialog组件之上？

问题核心是堆叠上下文限制：MudDialog的容器会创建独立的堆叠上下文，你放在DialogContent里的MudOverlay属于这个上下文内部元素，即使设置很高的z-index也无法突破容器的层级。

解决方法 #

给MudOverlay添加AppendToBody="true"属性，将其直接挂载到<body>节点下，脱离Dialog的堆叠上下文，这样Overlay的z-index就能和Dialog的层级直接对比生效。

修改后的MyComponent代码：

<div>
    <MudOverlay ZIndex="99999" Visible="true" AppendToBody="true" Style="background-color: aqua; padding: 20px" AutoClose="true" />
    <div style="background-color: blue; padding: 20px; width: 400px; height: 40px; margin-inline: auto">
    </div>
</div>

补充说明 #

• 无需重复设置Style里的z-index，MudOverlay的ZIndex属性会自动生成对应的样式。
• MudDialog默认z-index为1000，设置99999完全可以覆盖其层级。

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