要实现浮层效果，关键在于使用 box-shadow 制造立体感，配合 z-index 控制层级关系。这两个属性协同工作，能让元素看起来“悬浮”在页面其他内容之上，常见于模态框、卡片、提示框等 UI 组件。
使用 box-shadow 创建立体阴影
box-shadow 能为元素添加投影，模拟光源下的阴影效果，是实现“浮起”视觉的核心。
常用语法：box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色;
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);— 轻微上浮，适合卡片 -
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);— 更强浮起感，适合弹窗 - 可叠加多层阴影增强真实感：
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
利用 z-index 确保浮层在最上层
z-index 决定元素堆叠顺序。只有定位元素（position 不为 static）才能生效。
立即学习“前端免费学习笔记（深入）”；
设置方法：- 给浮层元素设置
position: relative或absolute - 赋予较高的
z-index值，比如z-index: 1000; - 确保背景层或底层内容的 z-index 更低，甚至不设（默认为 0）
.floating-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
z-index: 1000;
}
实际应用场景建议
在开发弹窗、下拉菜单、Tooltip 等组件时，注意以下几点：
- 浮层通常配合半透明遮罩层（overlay），其 z-index 应略低于浮层本身
- 避免 z-index 无限增大，可使用合理的层级规划，如：overlay 为 999，浮层为 1000
- 移动端注意阴影不要过重，以免影响性能和视觉舒适度
- 使用
border-radius配合 box-shadow 效果更自然
基本上就这些。box-shadow 负责“看起来浮起来”，z-index 负责“真的浮在上面”，两者结合就能实现干净利落的浮层效果。不复杂但容易忽略细节。
