Как установить абсолютное положение img, которое находится внутри карточки-IMG внутри карточки, которая является flex-элементом (я хочу сделать это как фон z-index -1)

Question

как я уже сказал, я пытаюсь отобразить несколько карт с изображением внутри div, которое не должно быть в потоке, поэтому оно должно быть абсолютным, хотя каждая карта является flex-item, и когда я запускаю этот код, все карты сталкиваются и просто действуют смешно

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.