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属性时，元素按照如下顺序堆叠（从底到顶顺序）:

1. 根元素的背景和边界
2. 普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠
3. 定位元素按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项目。

英文原文：

When debugging, your attitude matters