能解决但不推荐，易导致文字裁切、脱离语义流、响应式错位及可访问性问题；应优先用flex+gap、伪元素content加引号、transform替代top偏移等现代方案。
面包屑导航里文字和分隔符重叠了，用 position: absolute 能解决吗？
能，但容易让文字被裁切或脱离语义流。绝对定位会把 li 或 span 从文档流抽出来，如果父容器没设 position: relative，它就按视口定位，一滚动就飘走。更常见的是：分隔符（比如 /）用绝对定位盖在文字右侧，结果响应式缩放时错位、多行时覆盖不全、屏幕阅读器读不到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
flex+gap控制间距，分隔符作为独立li或伪元素，不依赖定位 - 真要用绝对定位（比如实现“文字悬浮时分隔符淡入”），必须给最近的父
ul或nav加position: relative - 避免对文字本身设
position: absolute—— 会破坏可访问性，screen reader可能跳过 - 测试窄屏下是否溢出：
white-space: nowrap配合overflow: hidden容易藏 bug，不如用text-overflow: ellipsis显式截断
用 ::before 或 ::after 插入分隔符，为什么有时候不显示？
伪元素默认是 display: inline，如果父元素是 flex 或 grid，它可能被压缩成 0 宽高；更隐蔽的是：父元素没设 content，或者用了空格但没加引号，css 就当没写。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
content必须带引号，哪怕只写一个斜杠：content: "/";，写成content: /;会直接失效 - 如果父
li是display: flex，伪元素需显式设align-self: center或margin-left: 8px，否则可能贴顶/贴底 - 旧版 safari 对
content中的 Unicode 字符（如›）渲染不稳定，建议用实体›或字体图标替代 - 不要给伪元素设
position: absolute后又忘设top/left—— 默认值是auto，行为不可控
移动端点击区域太小，加 padding 后定位样式全乱了
因为 padding 改变了元素盒模型尺寸，而你之前用 top: -2px 这类微调值是基于原始高度算的。一旦加了内边距，偏移量就得重算，而且不同字号下偏移量还不一样。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃用
top/right硬调位置，改用transform: translateY(-2px)—— 它不影响布局流，加padding也不影响对齐 - 所有涉及垂直居中的定位，优先用
top: 50%; transform: translateY(-50%)，比猜像素值可靠 - 移动端点透问题常来自
z-index层级混乱：确保分隔符伪元素的z-index不高于文字，否则手指点在文字上却触发了背后的链接 - 用
min-height和line-height统一控制点击区域高度，别只靠padding
IE11 下 position 面包屑完全错位，有兼容写法吗？
IE11 对 flex 的 gap、伪元素的 content（尤其含转义字符）、transform 的子像素渲染都支持差。它还把 position: absolute 子元素的 top: 0 解析成相对于第一个有 position 的祖先，而不是最近的那个。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对 IE11 单独加 hack：
.breadcrumb li { position: relative; } .breadcrumb li::after { position: absolute; top: 50%; left: 100%; margin-left: 4px; transform: translateY(-50%); }—— 显式声明层级关系 - 避免用
calc(100% - 1px)这类表达式，IE11 解析不稳定，换成固定值或 js 动态计算 - 分隔符不用
/，改用background-image的小图，IE11 对背景定位更可控 - 如果项目已弃用 IE11，就在 CSS 开头加
@supports not (flex-gap: 1em) { ... }做渐进增强，别为老浏览器拉低现代代码质量
定位做面包屑最麻烦的不是怎么摆，而是“什么时候不该用定位”——比如语义结构、响应式断点、焦点顺序、缩放后渲染精度，这些地方硬套 position 会埋一堆隐形债。