Vuetify中如何实现元素显示在其前一个元素的上方

数据老陈

2026-10-10

你遇到的遮挡问题是CSS堆叠上下文规则导致的：负margin仅调整了元素的位置，没有修改元素的堆叠层级，Vuetify的内置组件大多自带默认z-index或会创建堆叠上下文，所以层级更低的上移元素会被下层组件遮挡，可按以下方法修复：

优先使用Vuetify内置的z-index工具类，给需要上浮的元素添加对应class即可，层级数值越高级别越高，示例：
```

<div class="mt-n16 z-10">你的内容</div>
```
若添加工具类后仍被遮挡，可手动给元素指定相对定位和更高的z-index，z-index仅对position不为static的元素生效：
```
.overlap-item {
  position: relative;
  z-index: 10;
}
```
额外排查项：如果元素上移的部分直接被裁切而非被其他组件遮挡，检查该元素的父容器是否设置了overflow: hidden，将属性改为overflow: visible即可正常显示超出部分。