卡片悬浮操作栏需用position: relative+absolute实现，父容器设relative创建定位上下文，按钮用bottom/right锚定右下角，配合hover显隐与transform动画，注意z-index、阴影及移动端适配。
卡片悬浮操作栏不是靠 position: fixed 实现的——它必须随卡片一起滚动、一起悬停，且操作按钮要精准贴附在卡片角落。核心是 position: relative + position: absolute 组合，再配合 :hover 控制显隐。
为什么父容器必须设 position: relative
这是最容易漏掉也最致命的一环。如果卡片容器没设 position: relative，里面所有 position: absolute 的按钮会直接相对于整个页面定位，一滚动就“飞走”。它不改变卡片自身位置，只创建一个局部坐标系，让子元素的 top/right 有参照。
-
.card { position: relative; }是刚需，不是可选项 - 哪怕你暂时没加角标或遮罩，也建议提前加上——后续扩展时不用回头改
- 不要用
position: static（默认值）或position: absolute代替，前者无定位上下文，后者会让卡片脱离文档流
absolute 按钮如何精准锚定在右下角
操作栏通常放在右下角（如编辑、删除图标），用 absolute 定位最稳，但要注意偏移基准和尺寸控制。
- 写成
bottom: 8px; right: 8px;，而不是top/left，避免卡片高度变化时错位 - 给按钮容器加
display: flex和gap: 4px，比单个span更易控制间距 - 务必设
z-index: 10以上，否则可能被卡片内图片或遮罩盖住 - 若按钮需响应式隐藏（比如移动端只留一个主操作），用
display: none而非visibility: hidden，后者仍占布局空间
:hover 显隐 vs transform 动画的取舍
纯显示/隐藏用 opacity + visibility 最轻量；如果要“滑入”效果，必须用 transform: translateY()，不能用 top。
- 错误写法：
.actions { top: 100%; transition: top 0.2s; } .card:hover .actions { top: auto; bottom: 8px; }→ 触发重排，卡顿明显 - 正确写法：
.actions { transform: translateY(10px); opacity: 0; transition: transform 0.2s, opacity 0.2s; } .card:hover .actions { transform: translateY(0); opacity: 1; } - 移动端别依赖
:hover：加@media (hover: hover) and (pointer: fine)包裹，或用 JS 在touchstart时加active类
阴影与层级容易被忽略的细节
悬浮操作栏常带轻微阴影增强立体感，但 box-shadow 在 transform 动画中容易糊边，z-index 也可能因父层叠上下文失效。
- 阴影用
box-shadow: 0 2px 6px rgba(0,0,0,0.15)，别用filter: drop-shadow()—— 后者在动画中渲染不稳定 - 如果操作栏在悬停时“看不见”，先检查父卡片是否设置了
overflow: hidden，它会裁掉溢出的absolute子元素 -
z-index失效常见原因是卡片父容器有transform、opacity 或 <code>will-change，这些都会创建新层叠上下文，把按钮“锁”在内部
真正麻烦的不是写出来，而是改需求时——比如运营突然要求“左上角加分享按钮+右下角保留编辑”，这时候 relative 容器和多个 absolute 元素的定位冲突、z-index 优先级、以及移动端 touch 适配，才是实际项目里最耗时间的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
