如何将一张纸牌内的img绝对定位在一张纸牌内，这是一个弹性项目（我想使其成为背景z索引-1）

Question

正如我说过的，我试图在一张div中显示多张卡片，而该张卡片中不应该出现在流程中，所以尽管每张卡片都是一个弹性项目，但它应该是绝对的，当我运行此代码时，所有卡片都会发生冲突，并且表现得很滑稽。

HTML

<div v-for="movie in movies" class="card">
                <div class="card-img">
                    <img :src="test.img" alt="">

                </div>

                <div>some text</div>
        </div>

Css

.card {
    border-radius: 5px;
    width: 150px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255,255,255,.1);
    opacity: .7;
    position: relative;
}

.card > .card-img {
    position: absolute;
}

.card > .card-img > img {
    border-radius: 5px;
    max-width: 100%;

}

Answer 1

将高度赋予“ .card”。您是否需要卡片作为网格视图？如果您需要卡片作为网格，请添加父div并在其中应用flex样式。