Chart.js图表始终置顶导致vue-datepicker被遮挡的问题排查

打开vue-datepicker时，它始终显示在Canvas图表下方，无法正常点击选择。尝试过在浏览器开发者控制台修改Canvas的position: relative和z-index:10，同时将日期选择器下拉框设为z-index:50，但问题依旧。

相关代码 #

页面组件代码 #

<Tile :isLoading="!calculatedConsumption" class="col-span-1 row-span-2">
    <template #title>
        <div class="w-full flex gap-4">
            <h1 class="text-xl font-bold mr-auto">Jahresverbrauch</h1>
            <div class="w-full">
                <VueDatePicker v-model="selectedYear" :minDate="new Date(2021,0,1)" :maxDate="new Date()" :preventMinMaxNavigation="true" :autoApply="true" :yearPicker="true" :format-locale="de" locale="de"  dark />
            </div>
        </div>
    </template>
    <template #default>
        <div class="h-72" v-if="calculatedConsumption">
            <ConsumptionChart :v1="calculatedConsumption.v1"
                :v2="calculatedConsumption.v2" :v3="calculatedConsumption.v3"
                :title="'Heizen'" />
        </div>
    </template>
</Tile>

图表组件代码（Chart.js Pie） #

<Pie :data="{
        labels: ['v1', 'v2', 'v3'],
        datasets: [
            {
                borderColor: ['#4ADE80', '#D1495B', '#48639C'],
                backgroundColor: ['#4ADE80', '#D1495B', '#48639C'],
                data: [v1, v2, v3],
            }
        ]
    }" :options="{
    maintainAspectRatio: false,
    plugins: {
        legend: {
            labels: {
                color: '#fff'
            }
        },
        title: {
            text: title,
            display: true,
            color: '#fff'
        },
        tooltip: {
            callbacks: {
                label: (i) => {
                    return `${i.formattedValue}kWh`
                }
            }
        }
    }
}" />

• 针对日期选择器挂载层级的问题
  很多Vue日期选择器会将下拉面板挂载到body标签下，而非当前组件内部。此时组件内的z-index设置不会生效，需要直接给全局的下拉容器设置更高层级：

  /* 在全局样式文件中添加，类名根据实际组件调整 */
  .vdp-datepicker__dropdown {
    z-index: 9999 !important;
  }
  

  注意：不同日期选择器的下拉容器类名不同，需通过浏览器开发者工具定位实际类名。

• 检查堆叠上下文冲突
  如果Canvas的父元素（如Tile组件或h-72的div）设置了transform、perspective、filter等属性，会创建独立的堆叠上下文，导致内部元素的z-index无法和外部元素比较。解决方式：

  • 移除父元素上这类创建堆叠上下文的属性
  • 将日期选择器移到不受该堆叠上下文影响的DOM层级

• 给日期选择器容器设置堆叠上下文
  给日期选择器所在的外层div设置position: relative和足够高的z-index，确保其堆叠上下文优先级高于图表：

  <div class="w-full relative z-50">
    <VueDatePicker v-model="selectedYear" ... />
  </div>
  

• 调整图表容器的层级
  给Chart.js所在的容器设置较低的z-index，避免干扰上层元素：

  .h-72 {
    position: relative;
    z-index: 1;
  }
  

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