Debug 时，有个正确的态度至关重要

之前，我写过一篇文章《程序调试长什么样？》来讲述调试程序时应该做什么。有个基本要点：一次只改变一样东西，并核实你的假设。

但是，当我上周调试一些 CSS 程序时，我认为有些东西没讲：调试时的态度。

直到现在，我还不是一名杰出的 CSS 开发者。我不仅对很多基本的 CSS 概念缺乏理解，而且从来没有专业的写过 CSS。上周，我做了一个自己尝试过的最复杂的 CSS 项目。

当调试 CSS 项目时，我发现自己犯了一些不该犯的错误，这些错误有：

• 盲目的随机修改代码，并妄想能奏效；
• 在谷歌上搜了一大堆东西，还未理解就去尝试；
• 如果代码出错，回退更改到原状，并重新折腾

这样，没有任何效果。之后，我意识到这是因为我对 CSS 的态度（有问题）。与平常调试不同，我这次有先入为主的想法（对我来说，CSS 太难，我搞不懂）。让我们谈谈调试程序时的态度问题。

错误的态度——我认为这太难了

当遇到一个具体问题，我有 2 个层叠的 div，想把 Div A 叠放到 Div B 上。最初，我认为的 CSS 层叠模型是这样：“如果你想要把 A 叠加到 B 上，只要改变 z-index 就好了。”因此，我将 Div A 的 z-index 改成 5。

但它并未生效。在 Firefox 环境中，Div A 显示在最上面，而在 Chrome 环境中，Div B 显示在最上面。真让人头大。

我用 google 搜索了一下，发现 z-index 没有生效的一个可能原因是，Div A 和 Div B 实际处于不同的“堆叠上下文”中。如果是这样，即使我将 Div A 的 z-index 设置为 999999，仍然不会将 Div A 叠放在 Div B 上。（这有一个关于 z-index 问题的小型示例，虽然我认为那个 bug 还有一些其他因素）

我认为，这些堆叠上下文的相关内容看上去异常复杂，为什么 Firefox 和 Chrome 环境会有所不同，我根本不可能弄明白这些东西。于是，我尝试了网上推荐的方法，但这些建议统统不管用。

最后，我放弃这种“盲目修改并撞大运的”策略，去阅读关于堆叠顺序的文档。

我看了 MDN 关于堆叠顺序的页面，上面写着：

当没有元素包含 z-index 属性时，元素按照如下顺序堆叠（从底到顶顺序）:

根元素的背景和边界普通流 (无定位) 里的块元素 (没有 position 或者 position:static;) 按 HTML 中的出现顺序堆叠定位元素按 HTML 中的出现顺序堆叠

这么一解释，让我恍然大悟。这取决于 HTML 中的出现顺序！于是，我在 HTML 把 Div A 放在 Div B 的后面（作为同属（sibling）单元），这样它在两种浏览器的环境下都能正常工作。

正确的态度——让我们学习一些基础知识，看看是否有用

实际上，CSS 堆叠的问题并没有想象中那么复杂。你只需要阅读一个简单的文档，了解 CSS 是怎样进行堆叠的。

当然，计算机上的事情并非如此简单。而且即使在这个具体案例中，如果要深究怎样创建一个新堆叠上下文的规则，也很复杂。

所以，建议调试时，先冷静下来，学习一些基础知识，看看是否有所帮助。

在 CSS 中，另一个我认为“很难”理解的地方是关于position: absolute和position: relative的一整套规则。我不断看到一些代码示例中，人们用position: absolute属性来制作复杂的 CSS，但我搞不明白它们如何工作。

但是上周，我与一个比我更擅长 CSS 的人一起写代码，我发现别人在自己的代码里信心满满地使用position: absolute和position: relative属性。我也能成为这样的高手吗？

于是，我又去查阅 MDN 上关于position: absolute的文档，它是这样写的：

元素会被移出正常文档流，且在页面布局中不会为元素创建任何空间。元素位置是通过该元素相对于最近的定位祖先元素（closest positioned ancestor）的偏移量来确定的……元素的最终位置由 top、right、bottom 和 left 的值决定。

所以，如果一个元素带position: absolute属性，它的位置是相对于它们最近的定位祖先元素进行定位的！你只需要使用top/bottom/right/left这几个属性来决定它的位置！就是这么简单！

好的文档可以让你事半功倍

我认为此前对 CSS 丧失信心的另一个原因是，我不确定能在哪里找到准确的信息和建议。即使我知道 MDN 应该有帮助，但它无法解决非常具体的问题，比如我应该如何将一个 div 居中。为此我搜到许多答案，但我无法确定它们一定正确。

这周，我去 CSS Tricks 学习，发现很多非常棒的文章，比如 Centering in CSS: A Complete Guide ，这篇文章看上去很靠谱，而且写得清晰明了。

写在最后：

我不知道，为什么最初会坚信理解 CSS 的概念“是不可能的”，即使我往往认为计算机领域没有什么不可能。或许由于我在停留在 CSS 初级编程水平，却从未在这个领域深究。正是这种错误态度阻碍我写出好的 CSS 项目。

关注我并转发此篇文章，私信我“领取资料”，即可免费获得InfoQ价值4999元迷你书！