绝对定位圆点在flex容器里消失不见？先检查position: relative
弹性容器（display: flex）本身不构成定位上下文，position: absolute的子元素会往上找最近的「已定位祖先」——如果父容器没设position: relative（或absolute/fixed），它就可能直接相对于body定位，导致偏移错乱甚至被裁剪。
实操建议：
- 给弹性容器加
position: relative，这是最常见也最必要的一步 - 避免对
flex容器设overflow: hidden却不预留足够空间，圆点可能被意外裁掉 - 别依赖
justify-content或align-items去“推”绝对定位元素——它们对absolute子项完全无效
z-index不起作用？确认层叠上下文是否被意外创建
z-index只在同一个层叠上下文内生效。如果弹性容器或其某个祖先设置了transform、opacity、Filter等属性，就会隐式创建新的层叠上下文，导致内部z-index重新计数，外部设置的z-index失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 圆点明明设了
z-index: 999，却还在文字下面 - 父容器加了
transform: translateZ(0)做硬件加速，结果z-index行为异常
实操建议：
- 用浏览器开发者工具的「Layers」面板或「Computed」标签页，检查圆点和目标元素是否处于同一层叠上下文
- 若必须用
transform，把z-index提升操作移到该变换容器的父级上 - 慎用
opacity: 0.99这类“伪透明”来绕过渲染问题——它也会创建层叠上下文
圆点尺寸和居中逻辑容易错：别混用top/left和translate
想让一个width: 8px; height: 8px;的圆点精确居中于某个flex子项右上角？直接写top: 0; right: 0;往往不够——因为圆点自身有尺寸，右上角是它的左上角坐标点。
实操建议：
- 用
top: -4px; right: -4px;手动偏移（假设圆点半径为4px） - 更健壮的做法是：
top: 0; right: 0; transform: translate(50%, -50%);，再配合margin-left: -4px; margin-top: -4px;确保像素对齐 - 如果父容器用了
box-sizing: border-box但圆点含border，记得把边框宽度算进偏移量
响应式下圆点错位？优先用em或rem替代px
固定px值在缩放、字体调整或移动端不同DPR设备下容易失准；而em能随父元素font-size联动，特别适合配合flex布局中的文字驱动型组件（比如标签旁的圆点）。
实操建议：
- 圆点宽高、
top/right偏移统一用0.5em这类相对单位 - 在根元素设
font-size: 16px，再通过媒体查询调整，比一堆@media重写top值更可控 - 注意
transform: scale()会影响em计算——它基于当前元素的font-size，不是父级
真正麻烦的不是写几行css，而是当z-index和transform撞在一起，或者flex容器又套了grid又加了will-change时，那个小圆点到底听谁的——这时候得一层层看computed styles，而不是猜。