如何使 z-index 在不同的树级别上工作且位置相对于父级？

Question

我正在努力解决位置问题，我有一个滑块，在每张幻灯片上我都有一个背景，一个文本和理发图像，并且当您滑动脸部的空切时，滑块外面（绝对）有一张秃头的脸变化。问题是我希望脸部位于背景和头发之间，而脸部位于滑块 div 之外。这是滑块的代码：

<script setup lang="ts">
import HomeComponent from '@/components/HomeComponent.vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
const items = [
...
];

const modules = [Pagination];
</script>

<template>
    <div class="w-full h-full overflow-hidden">
        <swiper
            :slides-per-view="1"
            :pagination="{ clickable: true }"
            :grabCursor="true"
            :modules="modules"
            class="w-full h-full flex items-center justify-center"
        >
            <img
                src="/characters/face.png"
                class="w-1/5 z-[-1] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
            />
            <swiper-slide v-for="item in items" :key="item.id" class="z-[-2]">
                <HomeComponent
                    :color="item.color"
                    :character="item.character"
                    :title="item.title"
                    :link="item.link"
                    :linkText="item.linkText"
                    :id="item.id"
                />
                <img
                    :src="'/characters/' + item.character + '.png'"
                    alt="hero"
                    class="w-2/5 sm:w-1/2 mx-auto lg:w-1/5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
                />
            </swiper-slide>
        </swiper>
    </div>
</template>

home组件的代码：

<script setup lang="ts">
defineProps<{
    color: string;
    character: string;
    title: string;
    link?: string;
    linkText?: string;
}>();

const _ = ['bg-blue', 'bg-green', 'bg-purple'];
</script>

<template>
    <div
        class="w-screen h-screen relative flex items-center justify-center select-none"
        :class="`bg-${color}`"
    >
        <div
            class="flex flex-col items-center justify-end w-full h-2/3 sm:h-3/4 text-black gap-5"
        >
            <div
                class="flex flex-col gap-5 md:gap-20 justify-center items-center"
            >
                <h1
                    class="text-2xl lg:text-5xl font-bold text-center lg:leading-snug"
                    v-html="title"
                ></h1>
            </div>
            <div
                class="flex flex-col gap-5 md:gap-20 justify-center items-center"
            >
                <div v-if="link">
                    <RouterLink :to="link">
                        <div
                            class="text-lg lg:text-xl font-bold border-2 rounded-2xl border-black p-2 px-4 lg:px-8 hover:text-black hover:scale-110 transition-all duration-300"
                        >
                            {{ linkText }}
                        </div>
                    </RouterLink>
                </div>
            </div>
        </div>
    </div>
</template>

这是结果：

脸部没有出现，它在背景后面。

我尝试将图像放入滑动滑动组件内，但脸部并没有绝对保留在屏幕上，这就是我想要的。我尝试使用 z-index 但它总是在后面或前景。 我也尝试用 mix-blend 作弊，但它也不起作用。我认为我的问题是我的 DOM 结构，但我不知道如何以不同的方式做我想做的事情。

感谢您的帮助

Answer 1

我做了一个小例子来轻松重现您的问题，其中一个滑块包含 2 个元素和一个单独的树中的面。

请注意，您可以设置 2 个滑块元素之间的面，前提是您没有在滑块本身上设置 z-index

.slider {
    position: relative;
}

.sl-1 {
    width: 200px;
    height: 100px;
    background-color: yellow;
    position: relative;
    left: 0;
    top: 0px;
}

.sl-2 {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    left: 50px;
    top: -50px;
    z-index: 3;
}

.face {
    width: 200px;
    height: 100px;
    background-color: tomato;
    position: relative;
    left: 30px;
    top: -175px;
    z-index: 2;
}

<div class="container">
  <div class="slider">
      <div class="sl-1"></div>      
      <div class="sl-2"></div>
  </div>
  <div class="face"></div>
</div>