position: absolute 会脱离文档流导致父容器高度塌陷，需设 position: relative 并保留非绝对定位子元素；z-index 失效因层叠上下文隔离，应统一管理父容器上下文；移动端 right/top 错位因 box-sizing 和单位选择不当；伪元素仅适用于纯装饰内容。
position: absolute 会脱离文档流，导致父容器高度塌陷
电商卡片里给价格加 .price-tag、热销标加 .hot-badge，如果都用 position: absolute，父容器（比如 .card）很可能没高度，下面的卡片全叠一起。这不是 bug，是 CSS 规范行为——绝对定位元素不参与流式布局计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器
.card显式设置position: relative，这是绝对定位子元素的“锚点”，但还不够 - 若父容器需自适应高度（比如文字长度不固定），必须保留至少一个非绝对定位的块级子元素（如
.card-title或.card-desc），否则它真就塌成一条线 - 更稳妥的做法：价格标签用
position: absolute，但热销标识改用position: relative+top/right微调，避免双重脱离流
z-index 层叠失效，热门标盖不住价格或图片
常见现象是 .hot-badge 在 Chrome 看正常，到 Safari 就被 .product-img 盖住，或者价格数字明明写了 z-index: 10，却还是压不住 badge。根本原因是 z-index 只在同一个层叠上下文（stacking context）内生效，而 position: relative + z-index、opacity 、transform 都会隐式创建新上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
.card是否有transform: translateZ(0)或opacity: 0.99—— 这些会悄悄创建隔离上下文，让内部z-index重新从 0 开始算 - 把
.hot-badge和.price-tag放在同级 DOM 顺序中，并确保它们的最近共同层叠上下文（通常是.card）没有意外触发新上下文 - 简单粗暴但有效：给
.card加z-index: 0（触发层叠上下文）+position: relative，再统一管理子元素的z-index
移动端适配时 right/top 像素值错位
在桌面端设 right: 8px; top: 8px 刚好贴右上角，换到 iPhone 上发现 badge 跑到屏幕外，或者和价格重叠。不是媒体查询漏了，而是很多电商卡片用了 width: 100% + padding，而 position: absolute 的 right 是相对于 padding box 计算的，不是 content box。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
box-sizing: border-box确保父容器宽高包含 padding，否则right: 8px实际可能超出可视区域 - 避免用固定像素做定位偏移，改用
right: 1em或right: 2%，尤其当卡片字体随 viewport 缩放时 - 热销标常需响应式缩放，直接写
font-size: 0.75rem不如用font-size: clamp(0.6rem, 0.8vw, 0.875rem)，兼顾小屏可读和大屏不突兀
伪元素实现价格标签比额外 DOM 更轻量但限制多
有人用 ::before 给 .price 加「¥」符号或小标「折」，代码少、不用改 HTML。但很快遇到问题：想给这个「折」加背景色圆角，又想让它能被 JS 动态控制显隐，或者要支持无障碍读屏（screen reader）读出“特价”语义——伪元素全做不到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯装饰性内容（如货币符号、小圆点）用伪元素没问题；带业务语义、需交互、要 ARIA 支持的，必须用真实元素
- 若坚持用伪元素，
content里不能写空格或换行，否则可能撑开高度；需要居中对齐时，别依赖line-height，改用display: flex+align-items更稳 - 伪元素无法绑定事件，想点击展开优惠详情？老老实实加个
吧
复杂点在于，同一张卡片里价格、库存、热销、评分、收藏状态可能各自用不同定位策略，稍不注意就会相互干扰。最容易被忽略的是层叠上下文的嵌套层级和 transform 对定位参考系的影响——有时候删掉一行 will-change: transform，整个 badge 就归位了。
