使用 z-index

使用 z-index

在第一个例子中，我们描述了默认的摆放顺序。当你需要指定不同的排列顺序时，只要给元素指定一个 z-index 的数值就可以了。

该属性必须是整数 (正负均可)，它体现了元素在 z 轴的位置。如果你对 z 轴体系不了解，你也可以把它理解成"层叠"，每个层都有一个顺序数，顺序数大的层在上面，小的在下面。

注意！z-index 只对指定了 positioned 属性的元素有效。

• 底层：距离观察者最远
• ...
• -3 层
• -2 层
• -1 层
• 0 层 默认层
• 1 层
• 2 层
• 3 层
• ...
• 顶部：最接近观察者

在下一个例子中，所有的层都是用 z-index 进行排序的。元素 div#5 的 z-index 无效，因为他没有被指定 position 属性。