Css z-index属性

Css z-index属性是设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

W3C 对 z-index 属性的描述中提到 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

z-index的值越大,越在层的最上面

我们来通过下边的一个列子来说明一下。

上述是一个简单的测试z-index属性的一个html代码,效果如下图:

z-index

我们定义了3个层,分别是z1,z2和z3,z-index的属性值分别为1,2,3。我们看到z-index的值越大越在上层。

Ps:z-index属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效

 

Tags: ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注