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 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

视觉格式化模型-控制框

我们经常用到块元素、行内元素的概念,那么,到底什么是块元素,什么是行内元素,它们有什么特点,怎么形成的,有什么作用呢?什么是块框,什么又是行内框呢? 一、块级元...

1889
来自专栏用户2442861的专栏

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:

351
来自专栏互联网杂技

css中的伪类与伪元素

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。 伪类的种类 ...

3998
来自专栏Golang语言社区

【Go 语言社区】 golang 算法课程 第一季 第2节 洗牌算法

扑克牌洗牌是我们生活中比较喜欢玩的一个游戏。那么我们有没有什么办法自己设计一个扑克牌洗牌的方法呢?在运行库当中有一个随机函数rand,它可以生成0~32767之...

3837
来自专栏Crossin的编程教室

【每周一坑】矩阵旋转

每N周一坑(N>=1)又来啦!之前我们玩过一次矩阵【每周一坑】螺旋矩阵,今天继续来做矩阵相关的操作: 题目说明 给定一个 N * N 的矩阵(N >= 0),将...

3097
来自专栏cs

python笔记一 入门py

id()函数,是python内置函数,查看每一个对象的地址。 >>> help(id); Help on built-in function id in mod...

3376
来自专栏mathor

图的常见算法

 图是由一系列点和边的集合构成的,一般有邻接矩阵和邻接表两种表示方式,c/c++可以看我的这篇文章:搜索(1)  这篇文章主要讲java语言中图的相关算法。首...

632
来自专栏mathor

LeetCode54. 螺旋矩阵&LeetCode59.螺旋矩阵 II&LeetCode48. 旋转图像

 要是去找每次移动下标之间的关系就错了,很难找到,应该从宏观角度去看,首先打印的是最外层一圈,然后打印倒数第二层的一圈,...依次下去,所以应该这么做,找到...

572
来自专栏iOS技术杂谈

iOS runtime探究(三): 从runtime开始理解OC的属性property你要知道的runtime都在这里

你要知道的runtime都在这里 转载请注明出处 https://cloud.tencent.com/developer/user/1605429 本文主要讲解...

2669
来自专栏杨龙飞前端

BFC概念和作用,触发条件

1136

扫描关注云+社区