CSS系列之如何理解z-index和层叠上下文

[圆圆]

如何理解z-index？

z-index 属性指定一个元素的堆叠顺序。

当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

如何理解层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸。

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。