深入剖析z-index属性
一、z-index七阶层叠顺序表
1.层叠顺序的大小比较:
background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依赖z-index的层叠上下文< 正z-index。
2.层叠顺序级别高的元素覆盖级别低的元素。
二、z-index与创建层叠上下文
1.首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。
注意有一种特殊情况,那就是IE7下,auto也会创建层叠上下文,不符合标准。
2.z-index层叠顺序的比较止步于父级层叠上下文
控制视图时,如果父级元素没有层叠上下文,则会一直找到根元素作为层叠上下文
3.z-index:数字 + 元素属性 配合得到层叠上下文
①position:absolute/relative以及FireFox/IE下的position:fixed;
当z-index的值为auto时,元素还是普通元素,当z-index的值为具体数字时,就会创建层叠上下文
②z-index值不为auto的flex项(display:flex/inline-flex;)
层叠上下文元素是flex子元素,而不是flex容器元素
4.不需要与z-index:数字 配合就可以创建层叠上下文的属性
①元素的opacity值不为1;
②元素的transform值不为none;
③元素mix-blend-mode(混合模式)值不为normal;
④元素的filter(css3里的滤镜,不是指IE6/7/8/9里私有的那个滤镜)值不为none;
⑤元素的isolation(隔离)值是isolate(元素是孤立的)
isolation:isolate这个声明是mix-blend-mode应运而生的。 默认情况下,mix-blend-mode会混合z轴所有层叠在下面的元素,如果我们不希望某个层叠的元素参与混合就可以使用isolation:isolate。
⑥position:fixed声明,部分浏览器(FireFox/IE)需要z-index:数字 配合 ⑦will-change指定的属性值为上面任意一个
will-change的作用:增强页面渲染性能,即准备GPU(图形处理器)让浏览器加速渲染的
什么是GPU(图形处理器)?GPU是与处理和绘制图形相关的硬件。 GPU是专为执行复杂的数学和几何计算而设计的,可以让CPU从图形处理的任务中解放出来,从而执行其他更多的系统任务,例如,页面的计算与重绘。
当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧,于是卡顿。而will-change则是真正的行为触发之前告诉浏览器,提前预约从容不迫;突然造访手忙脚乱。
⑧元素的-webkit-overflow-scrolling设为touch(移动端特有的原生的滚动)
5.不支持z-index层叠上下文元素的层叠顺序均是z-index:auto;
6.为何定位元素会覆盖普通元素?
例如当图片使用了position:relative;此时图片z-index:auto;这时图片的的层叠顺序 > 内联元素(普通的图片文字是内联元素,层叠顺序是inline/inline-block),所以会覆盖。
三、z-index相关实践时注意的一些原则
1.最小化影响原则
目的:避免z-index嵌套层叠关系混乱
原因:①元素的层叠水平主要由所在的层叠上下文决定
②IE7 z-index:auto;也会新建层叠上下文
做法:①避免使用定位属性
②定位属性从大容器平级分离为私有小容器(relative课程)
2.不犯二准则
目的:避免z-index混乱,出现一山比一山高的样式问题
原因:多人协作以及后期维护
做法:对于非浮层元素,避免设置z-index值,z-index没有任何道理需要超过2
(浮层元素:比如弹框,在页面里拖来拖去)
3.组件层级计数器
目的:避免浮层组件因z-index背覆盖的问题
原因:①总会遇到意想不到的高层级元素(比如其他团队介入,或者使用网上的其他组件)
②组件的覆盖规则具有动态性(比如一个页面有好多个弹框)
做法:组件层级计数器方法:通过js获得body下子元素的最大z-index值,
例如组件默认是m,而body最大是n(n>m),那么就把组件设置为n+1
4.可访问性隐藏 人肉眼看不见,但是辅助设备可以识别的隐藏
z-index负值元素在层叠上下文的背景之上,其他元素之下
做法:z-index:-1;
eg:html代码:
- <input type="submit" id="submit" />
- <label for="submit">提交</label> <!--label的 for关联模拟,兼容性很好-->
css代码:
- [type=submit]{ position:absolute; z-index:-1; }
以上这篇深入剖析z-index属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
深入剖析z-index属性的更多相关文章
- Elasticsearch学习之图解Elasticsearch中的_source、_all、store和index属性
转自 : https://blog.csdn.net/napoay/article/details/62233031 1. 概述 Elasticsearch中有几个关键属性容易混淆,很多人搞不清楚_s ...
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...
- (一)javascript中的数组index属性——获取数组的索引值
例如:要做到这样的效果 点击每个选项时,会显示不同的div. 我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过 ...
- HTML5实战与剖析之classList属性
classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名 ...
- 使用jstl的Foreach 和jquery的each()的index属性
最近项目中用到隔行换色问题,使用到了jstl的foreach和jquery的each进行遍历. 首先jstl技术.除了常用的items,var外,还有一个下标属性varStatus,从0开始,使用起来 ...
- Pandas的index属性
我们在统计数据的长度或者个数,不用统计去专门获取数值,而是用index这个数据获取即可,DataFrame的index直接就是最前面的索引号,如果要统计列的个数,使用DataFrame.colums获 ...
- 图解Elasticsearch中的_source、_all、store和index属性
https://blog.csdn.net/napoay/article/details/62233031
- 负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
- 用原生JS实现一个轮播(包含全部代码和详细思路)
在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...
- 菜鸟nginx源码剖析 框架篇(一) 从main函数看nginx启动流程(转)
俗话说的好,牵牛要牵牛鼻子 驾车顶牛,处理复杂的东西,只要抓住重点,才能理清脉络,不至于深陷其中,不能自拔.对复杂的nginx而言,main函数就是“牛之鼻”,只要能理清main函数,就一定能理解其中 ...
随机推荐
- C# 调用一个按钮的Click事件(利用反射)
最基本的调用方法 (1)button1.PerformClick();(2)button1_Click(null,null);(3)button_Click(null,new EventArgs()) ...
- 东大OJ-快速排序
1236: Simple Sort 时间限制: 1 Sec 内存限制: 128 MB 提交: 195 解决: 53 [提交][状态][讨论版] 题目描述 You are given n ...
- rhel7修改网卡命名规则
1步:当安装完红帽RHEL7系统安装完成,您的网卡命名是这样的. 第2步:请编辑网卡的配置文件 将”/etc/sysconfig/network-scripts/ifcfg-eno16777736“的 ...
- dmesg 显示内核消息
显示内核消息 dmesg [options] dmesg 可以用来显示存储在内核环缓冲区中的消息 系统启动时,内核会用硬件和模块初始化的相关消息填充其环缓冲区.内核环缓冲区中的消息常常用于诊断系统问题 ...
- C#高级特性_Lambda
“Lambda 表达式”(lambda expression)是一个匿名函数 省略delegate,甚至省略参数类型: 直接用(参数)=> {语句或表达式} 例如: button1.Click ...
- Beta版本冲刺Day3
会议讨论: 628:已经将原本写在jsp中的所有界面修饰代码转移到了css文件中,同时当页面跳转的时候也不会出现崩溃的现象,并且已经解决了上次无法连接数据库的问题.但是又遇到了一些新的小问题,希望明天 ...
- Zookeeper总结
Zookeeper数据模型 zookeeper有一个层级的命名空间,更像一个分布式的文件系统. 唯一的区别就是命名空间中的每一个节点同它关联. ZNodes zookeeper树上的每一个节点被 ...
- 离线安装redis集群
Step0:redis集群组件需求 Step1:离线安装ruby Step2:离线安装rubygems Step3:安装rubygems的 redis api Step4:离线安装tcl 8.6 St ...
- Yii2 Redis的使用
Yii2 redis扩展 下载 将下载的解压,改名为redis,放在vendor\yiisoft\yii2\目录下 包含Connection.php,ActiveRecord.php等文件 修改 ...
- yii基础应用目录结构
basic/ 应用根目录 composer.json Composer 配置文件, 描述包信息 config/ 包含应用配置及其它配置 console.php 控制台应用配置信息 web.php We ...