使用 absolute 定位与 box-shadow 可创建立体悬浮卡片。1. 父容器设为 relative，card 设 absolute 并通过 top/left 定位，脱离文档流实现层叠；2. box-shadow 用 0 6px 12px rgba(0,0,0,0.15) 等值添加柔和阴影，增强立体感；3. 配合 border-radius 圆角、z-index 提升层级，并用 transition 实现悬停阴影过渡，常用于模态框、提示卡等强调 ui。
在CSS中，使用 absolute 定位 与 box-shadow 结合，可以制作出具有立体感的卡片投影效果。这种技术常用于模态框、悬浮卡片、提示框等需要突出显示的UI组件。
1. 使用 absolute 定位脱离文档流
将卡片元素设置为 position: absolute，可以让它脱离正常文档流，自由地放置在父容器中的任意位置，便于叠加和层叠控制。
关键点：- 父容器需设置 position: relative，作为 absolute 元素的定位参考。
- 通过 top、left、right、bottom 精确定位卡片位置。
- absolute 可让卡片“浮”在其他内容之上，适合做弹出层或阴影强调。
2. 添加 box-shadow 实现投影效果
box-shadow 属性用于给元素添加阴影，模拟光照下的立体感。结合 absolute 定位的卡片，能增强视觉层次。
语法示例：box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色;
- 常见值如 0 4px 8px rgba(0,0,0,0.1) 表示轻微下偏阴影，适合卡片。
- 增加模糊半径可让阴影更柔和，提升真实感。
- 使用透明黑色（rgba）避免阴影过于生硬。
3. 实际代码示例
以下是一个简单的悬浮卡片投影实现：
立即学习“前端免费学习笔记（深入）”；
.card-container {
position: relative;
width: 300px;
height: 200px;
background: #f0f0f0;
border-radius: 8px;
overflow: hidden;
}
.card {
position: absolute;
top: 20px;
left: 20px;
width: 260px;
height: 160px;
background: white;
border-radius: 8px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
z-index: 1;
}
在这个例子中，.card 脱离文档流，定位在容器内偏移处，并带有柔和阴影，形成“浮起”效果。
4. 提升视觉效果的小技巧
- 适当增加 z-index 确保卡片在最上层。
- 配合 border-radius 让卡片边角圆润，更贴近真实材质。
- 使用过渡动画 transition: box-shadow 0.3s ease，在悬停时增强交互反馈。
基本上就这些。absolute 定位负责布局控制，box-shadow 负责视觉表现，两者结合简单高效，是制作现代卡片投影的常用方式。不复杂但容易忽略细节。
