腾讯云618限量抢购
  1. HTML教程

CSS 层叠顺序 z-index 属性

最后更新:2010-10-13 00:25阅读:12202

层叠顺序

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

例子:

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

语法说明

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

本章节内容共分 3 部分:
  1. 1. CSS 相对定位 relative
  2. 2. CSS 绝对定位 absolute
  3. 3. CSS 层叠顺序 z-index 属性
腾讯云618限量抢购