堆叠元素
堆叠元素
使用现代 CSS 非常容易将元素堆叠在一起，无需太多代码，并且可以轻松扩展更多功能。
CSS 网格
使用 CSS Grid，我们可以创建可自定义的网格并将其项目分配给特定的行和列。我们将利用这一点来堆叠我们的元素。
让我们以下面的卡片为例：
首先，我们将卡片的容器 网格容器
.cards {
显示：网格；
}
接下来，我们明确地将所有卡片放入 相同的 列和行。
。卡片 {
网格行：1；
网格列：1；
}
你猜怎么着，就是这样！
呜呜呜！让我用一些非常简单的方法向您展示添加额外样式是多么容易。
一点偏移
所以用户可以看到卡片是堆叠起来的，让我们添加一点偏移量。在这个例子中，我们将走困难的路线，我们不知道要堆叠多少元素（卡片）。所以我们不能只使用 CSS，我们需要添加一点 JavaScript 来动态添加偏移量。
让我们更新卡片的 CSS
。卡片 {
网格行：1；
网格列：1；
// 新行
位置：相对；
顶部： var( — _card-offset);
}
使用 JavaScript，我们将更新我们的 CSS 变量。
常量卡片 = document.querySelectorAll(“.card”);
常量OFFSET_VALUE：30； card.forEach((card, i) => {
card.style.setProperty(` — _card-offset`, `${OFFSET_VALUE * i}px`);
})
简而言之，每张卡片都会比之前的卡片低 30px。
现在您可以设置卡片的 z-index 每当它悬停时，它就会变为更高的值，因此它会出现在前面。
.卡：悬停{
z指数：2；
}
遵循同样的模式，很容易扩展堆叠元素的样式和功能。
谢谢！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
