深入剖析z-index属性

时间: 2019-03-11阅读: 156标签: 属性

一、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代码:

XML/HTML Code复制内容到剪贴板
<input type="submit" id="submit" />    
<label for="submit">提交</label>   <!--label的 for关联模拟,兼容性很好-->

css代码:

XML/HTML Code复制内容到剪贴板
[type=submit]{ position:absolute; z-index:-1; }


原文链接:https://www.cnblogs.com/lucktian/p/5523165.html


js实现属性只读

第一种 Object.defineProperty这种是在vue源码中看见的;第二种使用闭包实现使用场景:团队协作开发的时候,没有详细的文档规范,防止队友误操作。

vue组件事件属性穿透

$attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好

CSS锚点

position属性定义建议元素布局所用的定位机制,z-index属性:检索或设置对象的层叠顺序,锚点链接:网页制作中超链接的一种,像定位器一样是一种页面内的超链接,设置锚点链接的方法:

csstext属性的使用_js中的style.cssText用法及特点

cssText 的本质就是设置 HTML 元素的 style 属性值。在某些浏览器中(比如 Chrome),你给他赋什么值,它就返回什么值。在 IE 中则比较痛苦,它会格式化输出、会把属性大写、会改变属性顺序

Vue与ref属性与refs的使用

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全