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

2022-01-1243次阅读css模块css

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/

上一篇: css两端淡出中间实色的分隔线  下一篇: 在Chrome DevTools中显示Shadow Dom的CSS样式  

使用Grid布局轻松实现元素层叠效果相关文章