顶栏叠影破案记：一行 2019 年的 CSS

重设计顶栏的第二天，一张截图发了过来：导航栏上「技术栈经历作品归档」几个词叠成一团墨迹，像盖了个歪掉的章。

现象与直觉相反

直觉会说这是 z-index 或字体加载问题。但把 DOM 抓出来看，结构完全正常——四个 <a> 各归各位。直到给它们逐个算位置才发现：四个链接的 left 全是 0，全部叠在起点。

改前 · 2019 年的祖传 CSS

.bar a {
  position: absolute;
  left: 0;
}

改后 · 归还给 flex

.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

为什么会有这行代码

翻底座模板的原始形态才看明白：它原本的顶栏只有一个链接（logo），用绝对定位钉在左侧毫无问题。我们往里塞了四个导航链接后，这行祖传 CSS 立刻把四个元素钉在了同一个坐标上。

模板没坏，它只是还在忠实地服务它原来的形态。接手任何模板时，默认它的每一条 CSS 都是为"过去的布局"写的——你要先问这行代码在服务谁，而不是它对不对。

破案手法比结论值钱

这类"只有用户看得到"的视觉 bug，我的排查流水线是固定的：

1. clip 截图    → page.screenshot({ clip: {x:0, y:0, width:1600, height:64} })
               把案发现场钉死在顶栏
2. DOM 外科    → page.evaluate 抓 outerHTML
               结构对不对，一眼定责
3. 计算样式     → getComputedStyle 逐个量坐标
               让 CSS 自己交代它在干什么

无头浏览器当显微镜用，比肉眼看十遍截图都快。这套手法后来在滚动大字带"狂奔"案里又用了一次——工具沉淀下来，第二个 bug 就便宜了。

删掉那两行，顶栏归还给 flex，四个词各回各家。现在它长这样：wqadlw. 技术栈 / 经历 / 作品 / 归档。

现象与直觉相反

改前 · 2019 年的祖传 CSS

.bar a {
  position: absolute;
  left: 0;
}

改后 · 归还给 flex

.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

为什么会有这行代码

破案手法比结论值钱

这类"只有用户看得到"的视觉 bug，我的排查流水线是固定的：

1. clip 截图    → page.screenshot({ clip: {x:0, y:0, width:1600, height:64} })
               把案发现场钉死在顶栏
2. DOM 外科    → page.evaluate 抓 outerHTML
               结构对不对，一眼定责
3. 计算样式     → getComputedStyle 逐个量坐标
               让 CSS 自己交代它在干什么

无头浏览器当显微镜用，比肉眼看十遍截图都快。这套手法后来在滚动大字带"狂奔"案里又用了一次——工具沉淀下来，第二个 bug 就便宜了。

删掉那两行，顶栏归还给 flex，四个词各回各家。现在它长这样：wqadlw. 技术栈 / 经历 / 作品 / 归档。