之前，我写过一篇文章《程序调试长什么样？》，解释了调试程序时应该做什么。基本要点是：一次只进行一项更改并测试您的假设。
但上周当我调试一些CSS 程序时，我意识到缺少了一些东西：调试态度。
到目前为止，我还不是一名出色的CSS 开发人员。我不仅不理解很多基本的CSS 概念，而且从来没有专业地编写过CSS。上周我参与了我尝试过的最复杂的CSS 项目之一。
在调试CSS 项目时，我意识到我犯了一些不应该犯的错误，包括：
盲目地对你的代码进行随机更改，在谷歌上搜索希望它能起作用，并在弄清楚之前尝试一下。如果您的代码遇到错误，回滚更改并重试将无效。后来我意识到这是因为我对CSS 的（有问题的）态度。与正常的调试不同，这次我有一个先入为主的想法（CSS太难懂了），所以我们来谈谈调试程序时如何牢记。
错误的态度——我认为这太难了
当我遇到一个特定问题时，我有两个堆叠的div，想要将Div A堆叠到Div B。最初，我对CSS 堆叠模型的想法是： “如果你想将A 堆叠在B 之上，只需更改z-index 即可。所以我将Div A 的z-index 更改为5。”
但没有效果。 Div A 在Firefox 中显示在顶部，Div B 在Chrome 中显示在顶部。我的头真的很痛。
经过谷歌搜索，我发现z-index 未启用的一个可能原因是Div A 和Div B 实际上位于不同的“堆叠上下文”中。在这种情况下，即使将Div A 的z-index 设置为999999，也无法将Div A 堆叠在Div B 之上。 （这是z-index 问题的一个小例子，但我确信这个错误还有更多内容）
我认为这些堆叠上下文中发生的事情看起来非常复杂，并且无法理解为什么Firefox 和Chrome 环境不同。于是，我尝试了网上介绍的方法，但都不起作用。
最终，我放弃了这种“盲目改变并希望运气”的策略，并阅读了有关堆叠顺序的文档。
我查看了有关堆叠顺序的MDN 页面，它说：
如果没有元素具有z-index 属性，则元素按以下顺序堆叠（从下到上）：
根元素背景和边框。正常流（未定位）块元素（无位置或position:static;）按照它们在HTML 中出现的顺序堆叠。
当我看到这个解释时，我突然意识到。它取决于HTML 中的出现顺序。因此，我将HTML 中的Div A 放置在Div B 之后（作为同级单元），以便它可以在两种浏览器环境中工作。
正确的态度——让我们学习一些基础知识，看看是否有用
实际上，CSS 堆叠问题并不像您想象的那么复杂。要了解CSS 是如何堆叠的，您只需阅读一些简单的文档即可。
当然，对于计算机来说，事情就没那么简单了。即使在这种特殊情况下，如何创建新的堆栈上下文的规则也很复杂。
所以，在调试的时候，最好先静下心来，学习一些基础知识，看看对你是否有帮助。
我发现CSS“难以”理解的另一件事是绝对位置和相对位置：position:的规则集。我经常看到使用position:绝对属性来创建复杂CSS的代码示例，但我无法理解它们是如何工作的。
但上周，当我和一个比我更擅长CSS的人一起编写代码时，我注意到对方在他们的代码中自信地使用了position:绝对和position:相对属性。我也能成为这样的大师吗？
于是，我查阅了关于Position: Absolute的MDN文档，发现了以下内容：
该元素被移动到正常文档流之外，并且在页面布局中不会为其创建空间。元素的位置由其相对于其最近祖先的偏移量确定。元素的最终位置由“上”、“右”、“下”和“左”值确定。
因此，如果元素具有position:绝对属性，则其位置是相对于其最近的祖先元素的。要确定位置，只需使用上/下/右/左属性即可。就是这么简单！
好的文档可以让你事半功倍
我认为我之前对CSS 失去信心的另一个原因是我不知道在哪里可以找到准确的信息和建议。我知道MDN 应该会有所帮助，但它并不能解决非常具体的问题，例如如何使div 居中。这个问题我找到了很多答案，但不知道是否正确。
这周我去研究了CSS Tricks，发现了很多很棒的文章，包括“CSS: Complete Guide to Centering”。这篇文章写得很清楚，很可靠。
写在最后：
我相信计算中没有什么是不可能的，所以我不知道为什么我最初确信理解CSS 概念是“不可能的”。可能是因为我还处于CSS编程的初级水平，所以还没有深入研究这方面。这种错误的态度使我无法编写出优秀的CSS 项目。
关注我并转发此篇文章，私信我“领取资料”，即可免费获得InfoQ价值4999元迷你书！版权声明：本文转载于今日头条，如有侵犯您的版权，请联系本站编辑删除。