CSS元素堆叠

在CSS中，可以为每个元素指定一个数字（z-index），用于控制它们在页面上的层叠顺序。简单来说，具有较大z-index值的元素将叠加在具有较小z-index值的元素之上。

一、层次堆叠案例

例如，我们正在玩扑克牌，拿到了一手同花大顺。为了更好地展示这手牌，我们可以为每张牌分别指定不同的z-index值，以便它们在页面上按照我们期望的层叠顺序显示。

在这个例子中，我们采用了1-5五个连续的数字来表示堆叠次序，但是你也可以用五个不同的其他数字来取得同样的效果。这里的要点在于：用数字的大小次序反映希望的堆叠次序。

扑克牌这个例子的代码可以这样写：

#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}

二、z-index属性含义

一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

1、z-index的属性值越高越靠前。

2、元素可拥有负的 z-index 属性值。

3、z-index 跟具体数字。

4、z-index的数值不跟单位。

如上图所示，这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，也就是说较高z-index值的元素最先呈现在用户的视野，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放。