Css 重叠化身图像覆盖背景图像和元素

我正在尝试将我的头像置于背景图像的中心，并保持头像在背景上以响应方式居中：

代码

<v-card>
    <v-img
        src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
        height="200px"
        class="woo"
    >
    <v-avatar style="postion:absolute; left: 44%; top: 80% " rounded width="80px" class="pa-1" height="80px">
        <img width="80" height="80" src="https://cdn.vuetifyjs.com/images/lists/1.jpg">
    </v-avatar>
    </v-img>
</v-card>

---

发生的情况是，化身在背景图像上流动，但化身隐藏在div后面。我尝试了

z-index

，但它不起作用。

您需要将父元素的

溢出设置为
可见，因为它的
高度固定为200px

<v-card>
    <v-img
        src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
        height="200px"
        class="woo" style="overflow: visible"
    >
    <v-avatar style="postion:absolute; left: 44%; top: 80% " rounded width="80px" class="pa-1" height="80px">
        <img width="80" height="80" src="https://cdn.vuetifyjs.com/images/lists/1.jpg">
    </v-avatar>
    </v-img>
</v-card>



希望这有帮助。干杯