举例详解CSS的z-index属性的使用

我们普遍认为HTML页面是二维的展示方式，实际上，CSS中有一个神奇的属性——z-index，它允许我们在三维空间中层叠元素。所有的盒模型元素都存在于一个三维坐标系中。除了我们所熟知的横向和纵向坐标外，盒模型元素还可以在“z轴”上进行层叠排列。当多个元素在页面中相互覆盖时，z轴的排列顺序就显得尤为重要。

在没有指定z-index属性的情况下，元素的堆叠顺序遵循一套默认的规则。根元素的背景和边框在最底部，接着是普通的块级元素，按照它们在HTML中出现的顺序堆叠。定位元素也会按照其在HTML中的出现顺序进行堆叠。对于浮动的块级元素，它们的堆叠顺序稍有不同，它们被放置在普通流中的块级元素与定位块级元素之间。

如果你想要改变元素的默认堆叠顺序，你可以使用z-index属性。z-index的值必须是整数，代表着元素在z轴上的位置。值越大，元素在堆叠中的层次就越高，即离观察者越近。没有指定z-index的元素默认在0层渲染。当多个元素的z-index属性相它们的堆叠顺序将遵循前面描述的规则。

值得注意的是，仅仅指定z-index属性并不能构造一个堆叠上下文。以下元素会构造堆叠上下文：根元素html、定位元素（且其z-index值不为auto）、opacity小于1的元素以及在移动WebKit和Chrome 22+版本中，指定了position: fixed的元素。在这些堆叠上下文中，子元素按照前面描述的顺序进行堆叠。而且，子堆叠上下文的z-index只在父堆叠上下文中有意义。

了解并合理使用z-index属性，我们可以实现复杂的页面布局和元素交互效果。它让我们的页面不仅限于二维的展示方式，而是在三维空间中展现出更多的可能性。