CSS深入理解学习笔记之z-index

1、z-index基础

  z-index含义:指定了元素及其子元素的”z顺序“,而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。

  z-index值:auto(默认值);integer(整数值);inherit(继承)。

  z-index基本特性:①支持负值;②支持CSS3 animation动画;③在CSS2.1时代,需要和定位元素配合使用。

2、z-index与定位元素

  z-index值越大越在上面。

  如果定位元素z-index发生嵌套:祖先优先原则,前提是祖先的z-index值是数值,不是auto

3、层叠上下文与层叠水平

  层叠上下文:是HTML元素中的一个三维概念,表示元素在z轴上的层叠表现。

  具有层叠上下文的元素:①页面根元素天生具有层叠上下文,称之为”根层叠上下文“;②z-index值为数值的定位元素也具有层叠上下文;③其他属性

  层叠水平:层叠上下文的每个元素都有一个层叠水平,决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。层叠水平和z-index不是同一个东西,普通元素也有层叠水平。

  层叠上下文特性:①层叠上下文可以嵌套,组合成一个分层次的层叠上下文;②每个层叠上下文和兄弟元素独立,当进行层叠变化或渲染的时候,只需要考虑后代元素;③每个层叠上下文是自成体系的,当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。

4、层叠顺序

  含义:元素发生层叠时候有着特定的垂直显示顺序。

  著名的7阶层叠水平:

5、z-index与层叠上下文

  ⑴ 从层叠顺序上讲,定位元素默认z-index:auto可以看成是z-index:0,但是从层叠上下文来讲,两者却有着本质的差异;

  ⑵ z-index不为auto的元素会创建层叠上下文;

  ⑶ z-index层叠顺序的比较止步于父级层叠上下文。

  为何定位元素会覆盖普通元素:具有定位属性的元素,z-index值为auto可以看为0,z-index:auto的层叠顺序>inline水平盒子。

  z-index与创建层叠上下文:z-index不是auto的情况下,元素会创建层叠上下文。(IE8+)

  z-index受限于层叠上下文:父元素z-index为数值的情况下,会优先展现层叠顺序。

6、其他属性与层叠上下文

  其他参与层叠上下文的属性:①z-index值不为auto的flex项(父元素display:flex|inline-flex);②元素的opacity值不是1;③元素的transform值不是none;④元素mix-blend-mode值不是normal;⑤元素的filter值不是none;⑥元素的isolation值是isolate;⑦position:fix声明;⑧will-change指定的属性值为上面任意一个;⑨元素的-webkit-overflow-scrolling设为touch。

7、z-index与其他属性层叠上下文

  不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别:

  依赖z-index的层叠上下文的层叠顺序却决于z-index值。

8、z-index相关实践分享

  最小化影响原则:

  不犯二准则:

  组件层级计数器:

  通过JS获得body下子元素的最大z-index值。

  负值z-index与可访问性隐藏:

    可访问性隐藏:人肉眼不可见,但是辅助设备可以识别。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏疯狂的小程序

微信小程序版2048小游戏(附源码)

最近流行微信“跳一跳”小游戏,我也心血来潮写了一个微信小程序版2048,本篇文章主要分享实现2048的算法以及注意的点,一起来学习吧!(源码地址见文章末尾)

1K8
来自专栏闻道于事

CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

2335
来自专栏nummy

Tkinter grid布局

Tkinter参考中最推荐使用的一个布局器。实现机制是将Widget逻辑上分割成表格,在指定的位置放置想要的Widget就可以了。

573
来自专栏web前端教室

html5-canvas刮刮卡实例-圆形刮痕

知识点 1、globalCompositeOperation属性,该属性表示的是图形的组合方式 2、使用到的是destination-out,它表示只绘制原图形...

1888
来自专栏闻道于事

Layui常见问题

为什么表单不显示?当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以...

4195
来自专栏小古哥的博客园

标签语义化之常用HTML标签

一、布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个...

2745
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

764
来自专栏黒之染开发日记

【easeljs】矢量绘图工具 Graphics类

Graphics类公开了一个易于使用的,用于生成矢量图和把它们绘制到指定的内容里的API。注意,你可以不需要依赖EaselJS框架,通过直接调用draw来使用G...

825
来自专栏前端萌媛的成长之路

CSS盒子模型

1603
来自专栏wym

python实现 opencv 学习笔记---模板匹配matchTemplate

这是打印出result的值,下面一张图是计算公式,通过公式也可以知道匹配程度在什么情况下最好

1555

扫码关注云+社区