通过结合box-shadow和position属性，可实现具有立体感和精确定位的卡片效果。首先为.card设置柔和阴影和relative定位，使其浮起并作为定位基准；再为.badge添加absolute定位，使其相对于卡片定位在右上角，并通过阴影增强层次感；对于多卡片堆叠场景，利用z-index控制层级，配合不同强度的box-shadow区分前后关系；最后通过:hover状态实现悬停时阴影加大和上移动画，提升交互体验。整个方案中，box-shadow构建视觉深度，position实现灵活布局，二者协同提升组件美观性与可用性。
卡片阴影和定位在现代网页设计中非常常见，尤其在信息展示类页面如产品列表、用户资料卡等场景中。通过结合 box-shadow 和 position 属性，可以实现视觉层次丰富且布局灵活的卡片效果。下面是一个实用的实践案例，帮助你掌握两者的结合使用。
1. 基础卡片结构与阴影设置
首先定义一个基本的卡片容器，并添加柔和的阴影来提升立体感。
.card {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
}
这里使用了 box-shadow 创建轻微的投影，使卡片从页面“浮起”。position: relative 为后续的定位元素提供参考基准。
2. 使用绝对定位叠加内容（如标签或角标）
常需要在卡片角落添加“推荐”、“新”等标签。这些元素适合用绝对定位脱离文档流并精确放置。
立即学习“前端免费学习笔记（深入）”；
.badge {
position: absolute;
top: -8px;
right: -8px;
background-color: #ff4d4f;
color: white;
padding: 6px 10px;
font-size: 12px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
由于 .card 设置了 position: relative，.badge 的绝对定位将以卡片为父容器进行偏移。这样标签能精准贴合卡片右上角，同时保留阴影增强视觉深度。
3. 多层卡片堆叠与深度阴影控制
在某些界面中，可能需要多个卡片重叠显示（如轮播图、模态框）。利用 z-index 配合不同强度的 box-shadow 可模拟层级关系。
.card-featured {
position: absolute;
z-index: 2;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.card-normal {
position: absolute;
z-index: 1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
高 z-index 的卡片不仅在上方显示，还配有更强烈阴影，强化其“前置”感知。这种组合让界面更具空间感。
4. 悬停动效增强交互体验
结合 :hover 状态，可进一步提升用户体验。
.card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-4px);
transition: all 0.3s ease;
}
鼠标悬停时，阴影加大并轻微上移，形成“抬起”动画。注意要给所有变化属性添加 transition 以实现平滑过渡。
基本上就这些。box-shadow 负责视觉层次，position 解决布局定位，两者配合能让卡片组件既美观又灵活。实际开发中可根据设计需求调整参数，但核心逻辑不变。不复杂但容易忽略细节，比如父级定位缺失会导致 absolute 失效，或者阴影颜色太深破坏整体美感。合理搭配，效果立现。
