内容提要

本书从前端开发人员的需求出发，以“流”为线索，从结构、内容到美化装饰等方面，全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时，作者结合多年的从业经验，通过大量的实战案例，详尽解析CSS的相关知识与常见问题。作者还为本书开发了专门的配套网站，进行实例展示、问题答疑。

作为一本CSS深度学习的书，书中介绍大量许多前端开发人员都不知道的CSS知识点。本书语言通俗易懂，内容深入浅出，并结合实战经验，更适合对CSS有所了解的前端开发人员阅读。通过阅读本书，读者会对CSS世界的深度和广度有一个全新的认识。

第7章

CSS世界的层叠规则

所谓“层叠规则”，指的是当网页中的元素发生层叠时的表现规则。

在现实世界，凡事都有个先后顺序，凡物都有个论资排辈。例如，食堂排队打饭，讲求先到先得，总不可能一拥而上；先入学的是学长学姐，先拜师的是师兄师姐。

在CSS界也是如此。只是，一般情况下众生平等，看不出什么差异。但是，当产生冲突或纠葛的时候，显然是不可能做到完全平等的。对CSS世界中的元素而言，所谓的“冲突”指什么呢，其中很重要的一个层面就是“层叠显示冲突”。

默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生，有点儿类似于真实世界中“论资排辈”的感觉。

7.1　z-index只是CSS层叠规则中的一叶小舟

说到层叠，很多人第一反应就是z-index属性，人如其名，“z轴顺序”明摆着就是和层叠规则有关。

在CSS世界中，z-index属性只有和定位元素（position不为static的元素）在一起的时候才有作用，可以是正数也可以是负数。理论上说，数值越大层级越高，但实际上其规则要复杂很多，这个后面会深入介绍。

但随着CSS3新世界的到来，z-index已经并非只对定位元素有效，flex盒子的子元素也可以设置z-index属性，不过本书并不予以讨论。

要知道，网页中绝大部分元素是非定位元素，并且影响层叠顺序的属性远不止z-index一个，因此大家千万不要以为z-index属性就可以代表CSS世界的层叠规则，实际上z-index只是CSS层叠规则中的一叶小舟，CSS层叠规则的体量要比大家想象的要大得多。

7.2　理解CSS世界的层叠上下文和层叠水平

7.2.1　什么是层叠上下文

层叠上下文，英文称作stacking context，是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

这里出现了一个名词——z轴，它指的是什么呢？其表示的是用户与显示器之间这条看不见的垂直线，即图7-1中的这条水平线。

图7-1　z轴示意

层叠上下文是一个概念，跟“块状格式化上下文”（BFC）类似。然而，概念这个东西是比较虚、比较抽象的，要想轻松理解，我们需要将其具象化。

怎么个具象化法呢？我们可以把层叠上下文理解为一种“层叠结界”，自成一个小世界。这个小世界中可能有其他的“层叠结界”，而自身也可能处于其他“层叠结界”中。

7.2.2　什么是层叠水平

再来说说“层叠水平”。层叠水平，英文称作stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。level这个词很容易让我们联想到现实世界中的论资排辈。现实世界中，每个人都是独立的个体，包括同卵双胞胎，有差异就有区分。例如，双胞胎虽然长得像一个模子里出来的，但实际上出生时间还是有先后的，先出生的那个就大，是大哥或大姐。网页中的元素也是如此，页面中的每个元素都是独立的个体，它们一定是会有一个类似的排名顺序的存在。而这个排名顺序、论资排辈就是这里所说的“层叠水平”。