使用Grid布局轻松实现元素层叠效果

grid-area: 1/-1，-1代表在网格的最后一列和行，因此会一直跨越到列或行结束。

<article class="card">
    <div class="card__thumb">
        <img src="assets/mini-cheesecake.jpg" alt="">
    </div>
    <div class="card__content">
        <h2><a href="#">Title</a></h2>
        <p>Subtitle</p>
    </div>
</article>

.card__thumb,
.card__content {
    grid-area: 1/2;
}

或者

.card__thumb,
.card__content {
    grid-area: 1/-1;
}

上层标签在上方

.card__content {
    grid-area: 1/-1;
   align-self: start;
}

上层标签在下方

.card__content {
    grid-area: 1/-1;
   align-self: end;
}

上层标签拉伸全覆盖

.card__content {
    grid-area: 1/-1;
   align-self: stretch;
}

参考：

https://ishadeed.com/article/less-absolute-positioning-modern-css/

https://www.zhangxinxu.com/wordpress/2021/02/grid-area-absolute-cover/