vue3 遮罩层标签为什么永远在所有内容上面呢

vue3 遮罩层标签为什么永远在所有内容上面呢？设置z-index也无效。

带红颜色的是遮罩层！ 救命，求帮忙指点。

.dialog {
            width: 500px;
            max-height: 310px;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            position: absolute;
            z-index: 999;
            top: 30%;
            right: 0;
            box-sizing: border-box;
            padding: 30px;
}
.mask {
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    background-color: red;
    opacity: 0.6;
}

你把两个标签的 z-index值交换一下也没用吗