z-index影响下的层级布局
来源:互联网 发布:淘宝无法打开登录界面 编辑:程序博客网 时间:2024/05/21 10:06
定义:
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效。)
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
可选值:
规则:
基本规则:
1. 不设置position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用。
2. 设置了position属性(值不为static),对应的节点将脱离文本流,漂浮(覆盖)在其他节点上边。所以设置position属性能提升节点的显示等级。
3.如果所有节点都定义了相同的position,例如absolute。但没有设置z-index属性,节点将按出现的顺序依次覆盖前面节点重叠的部分,遵循“后来居上”原则。
4. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖。
5. 子元素永远覆盖在父元素的上方。
<head><style type="text/css">*{margin:0;padding:0;}body{background-color:#000;}.b{width:80px;height:70px;background:blue;position:absolute;}.lt10{left:10px;top:10px;}.a{width:80px;height:70px;background:red;}.c{width:80px;height:70px;background:yellow;}</style></head><body><div class="a">A</div><div class="b lt10">B</div><div class="c">C</div></body>
从父规则:
若是父节点都设置了一样的z-index值,则无论子节点设置何值,都只依照父节点的z-index值,根据上边所述的“基本规则”,完成节点之间的叠放。
<head><style type="text/css">*{margin:0;padding:0;}body{background-color:#000;}.b{width:160px;height:140px;background:blue;position:absolute;z-index:1;}.c{width:160px;height:140px;background:yellow;position:absolute;z-index:1;}.a{width:160px;height:140px;background:red;position:absolute;z-index:1;}.lt30{left:30px;top:30px;}.lt60{left:60px;top:60px;}.lt15{left:15px;top:15px;}.a1{width:160px;height:140px;background:pink;position:absolute;z-index:3;}.b1{width:160px;height:140px;background:gray;position:absolute;z-index:4;}</style></head><body><div class="a">A<div class="a1 lt15">A1</div></div><div class="b lt30">B<div class="b1 lt15">B1</div></div><div class="c lt60">C</div></body>
如图所示,A1、B1设置的值比C高,但是依旧被作为跟A、B同级的C节点所覆盖。
若在上边的代码加点小修改,比如删掉节点A的position属性,或者position设置为static,就会产生不同变化。
删去position属性,A1由于z-index值最高覆盖了其他节点 删去A1节点,证明A的z-index值失效从而被其他节点覆盖
原因:因为absolute的绝对定位是以设置了relative或者absolute的父辈元素为焦点的,用上述例子来说,A1是放在A中的div,但是A的position已经删除,所以A1、B、C都是根据屏幕的左上角作为定位的焦点,在定位的层级元素上属于同一层,因为z-index高于B、C,所以也就覆盖了其他节点。
默认值规则:
IE6、7以及IE8的混杂模式下,若只是设置了position属性,而未设置z-index属性的话,z-index的默认值是0,表示对应的节点将要加入到布局定位的层级元素的比较中去。
在其他浏览器中的默认值为auto,不参与到层级元素的比较,其设置了z-index的子节点直接跳过“从父规则”加入到层级元素的比较。
直接将上边第一段代码中A、B、C三个节点的z-index属性删除,效果图如下:
firefox下z-index的默认值为auto IE 6下z-index的默认值为0
注:以上只是讨论了div元素中设置positon以及z-index属性的影响,还有一些特殊的元素例如iframe,select比较复杂的问题以后再更新
- z-index影响下的层级布局
- position 属性和 z-index 属性对页面节点层级影响的例子
- css的z-index改变层级
- 层级问题,z-index的使用说明
- css z-index层级关系
- 关于z-index层级问题
- z-index 属性的使用方法和层级树的概念
- margin负值引起的层级(z-index)问题
- CSS中z-index的层级树概念
- 关于设置z-index层级无效的问题
- 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响
- 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响
- z-index层级在IE中无效
- IE7 绝对定位z-index 层级问题
- DIV position z-index 设置层级
- z-index层级在IE中无效
- 【CSS疑难杂症】z-index 层级树
- z-index层级在IE中无效
- Java深度历险(二)——Java类的加载、链接和初始化
- BitBlt介绍
- 实时错误“3021”在Delete事件中出现的解决方法
- 旺铺基础版怎么升级专业版
- spring整合ibatis步骤及配置文件
- z-index影响下的层级布局
- SQL语句的添加、删除、修改多种方法
- Grails2中GORM 的继承
- 使用git创建空分支
- excel中的邮箱地址群发
- ubantu sudo apt-get 安装下载更新软件包命令详解
- 统计apache日志文件里访问量前十的ip并按从多到少排列
- Java深度历险(三)——Java线程:基本概念、可见性与同步
- PB异常错误代号