CSS 层叠顺序 z-index 属性
   来源:网络收集   评论:0 点击:

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

层叠顺序

采用了定位属性的框(块级元素),如前文所示,可能会有彼此层叠覆盖的情形,“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 属性

值得拥有!精心推荐几款超实用的 CSS 开发工具
纯CSS(无 JavaScript)实现的响应式图像显示
推荐大家使用的CSS书写规范、顺序
CSS3 transition规范的实际使用经验
30个漂亮的HTML5和CSS3下拉菜单


手机页面二维码(扫一扫转给需要的人)

相关热词搜索:CSS 层叠顺序 z-index 属性

上一篇:CSS 绝对定位 absolute
下一篇:CSS 浮动 float 属性

分享到: 收藏