css制作叠层
使用CSS制作叠层效果
CSS中的叠层效果可以通过z-index属性和定位属性（如position: relative/absolute/fixed）实现。以下是几种常见方法：
基础叠层实现
为需要叠层的元素设置定位属性，并通过z-index控制层级：
.parent {
position: relative;
width: 300px;
height: 200px;
}
.layer1 {
position: absolute;
z-index: 1;
background: rgba(255,0,0,0.5);
width: 100%;
height: 100%;
}
.layer2 {
position: absolute;
z-index: 2;
background: rgba(0,0,255,0.5);
width: 80%;
height: 80%;
top: 10%;
left: 10%;
}使用CSS Grid实现叠层
CSS Grid布局可以更灵活地控制叠层：
.container {
display: grid;
}
.container > * {
grid-area: 1/1;
}伪元素叠层
利用::before或::after创建叠层效果：
.card {
position: relative;
}
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, black);
z-index: 1;
}多层叠层动画
结合动画实现动态叠层效果：
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.layer {
animation: float 3s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.1s);
}注意事项
z-index只在定位元素（非static）上有效- 父元素的
z-index会创建新的层叠上下文 - 高
z-index值不一定总是显示在上层，需考虑层叠上下文关系 - 使用透明度（rgba/hsla）可以增强叠层的视觉效果
