Blazor Server日期选择器弹窗下移，z-index不生效问题排查

我正在构建Blazor Server日期选择器组件，包含输入框和隐藏的日历卡片两部分。需求是日历卡片对齐输入框左下角显示，点击输入框时触发展示。目前点击输入框后卡片会挤压页面下方所有元素下移，我为卡片div设置了position:relative和极高的z-index，但它并未显示在页面其他元素上方。

组件代码如下：

<div class="parent">
    <div>
        <label class="control-label" for="@Id">@Label</label>
    </div>
    <div class="input-group mb-2" tabindex="0" @onclick="()=>SetCalendar()">
        <InputDate id="@Id" class="form-control datePick" tabindex="0" @bind-Value="@Date" @onkeyup="()=>ManualDate()" />
        <span class="input-group-text" style="cursor:pointer"> <span class="oi oi-calendar" aria-hidden="true"></span></span>
    </div>
    <div class="col-12 child" style="z-index:9999;position:relative;">
        //This is where my calendar HTMl is
    </div>
</div>

页面引用组件方式：

<DatePicker @bind-Date="ExampleDate" Label="All Days" />

我原以为position:relative搭配z-index可实现元素前置，请问问题出在哪里？

问题根源 #

• position: relative的元素仍属于文档流，会占据原有空间，所以显示时会挤压下方元素
• z-index仅在同一定位上下文内生效，relative元素的层级无法脱离当前文档流覆盖其他元素

修正步骤 #

1. 父容器设置相对定位：给.parent添加position: relative，作为日历卡片绝对定位的参考容器
2. 日历卡片设置绝对定位：将.child的position: relative改为position: absolute，脱离文档流，不再占据空间
3. 调整卡片位置：添加left: 0; top: 100%，让卡片对齐输入框的左下角
4. 保持高z-index：确保卡片在其他元素上方显示

修改后的组件代码 #

<div class="parent" style="position: relative;">
    <div>
        <label class="control-label" for="@Id">@Label</label>
    </div>
    <div class="input-group mb-2" tabindex="0" @onclick="()=>SetCalendar()">
        <InputDate id="@Id" class="form-control datePick" tabindex="0" @bind-Value="@Date" @onkeyup="()=>ManualDate()" />
        <span class="input-group-text" style="cursor:pointer"> <span class="oi oi-calendar" aria-hidden="true"></span></span>
    </div>
    <div class="col-12 child" style="z-index:9999;position:absolute;left:0;top:100%;">
        //This is where my calendar HTMl is
    </div>
</div>

额外提示 #

• 如果日历卡片被其他元素遮挡，检查父容器是否有overflow: hidden属性，若有需移除，否则会裁剪绝对定位的子元素
• 给卡片添加背景色（如background-color: white），避免和下方内容重叠时显示混乱

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