CSS 层叠顺序 z-index 属性

层叠顺序

采用了定位属性的框（块级元素），如前文所示，可能会有彼此层叠覆盖的情形，“z-index”属性用于设定层叠的顺序，取值为整数（可为负）。

例子：

#div2 { 
    position: relative;
    left: 30px;
    top: 20px;
    z-index: 3;
}

语法说明

1. z-index以数字代表层叠顺序，较大值的元素对象会覆盖在较小值的对象之上
2. 如两个绝对定位对象的此属性具有同样的数值，那么将依据它们在HTML文档中声明的顺序层叠。
3. 对于未指定此属性的绝对定位对象，此属性的值为正数的对象会在其之上，而值为负数的对象在其之下
4. 此属性仅仅作用于定位元素上，如“position: relative”