资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/z-index

z-index

vincent_xyb / 3418人阅读

摘要：层叠上下文是中的一个三维的概念如果一个元素含有层叠上下文我们就可以理解为这个元素在轴上就高人一等轴表示用户与屏幕之间并不存在的的垂直线通俗点讲就是人眼看屏幕的视线这条垂直于屏幕的线拥有层叠上下文的元素包括页面根元素天生具有层叠上下文称之为根

stacking context

层叠上下文(stacking context)是HTML中的一个三维的概念.如果一个元素含有层叠上下文,我们就可以理解为这个元素在Z轴上就"高人一等".

Z轴表示用户与屏幕之间并不存在的的垂直线,通俗点讲,就是人眼看屏幕的视线这条垂直于屏幕的线

拥有层叠上下文的元素包括:

页面根元素天生具有层叠上下文,称之为"根层叠上下文"

z-index值为数值的定位元素也具有层叠上下文

其他属性也可以具有层叠上下文

stacking level

层叠水平(stacking level),决定了同一个层叠上下文中元素在z轴上的显示顺序

普通元素的层叠水平优先由层叠上下文决定,因此层叠水平的比较只有在当前层叠上下文元素中才有意义

需要注意的是,千万不要把层叠水平和CSS的z-index属性混为一谈.没错,某些情况下z-index确实可以影响层叠水平,但是只限于定位元素以及flex/inline-flex子元素,而层叠水平所有的元素都存在

stacking order

层叠顺序(stacking order)是元素发生层叠时候有着特定的垂直显示顺序

注意,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则

上图是著名的7阶层叠水平(stacking level)图

上图的层叠顺序inline/inline-block水平盒子(内容)>float浮动盒子以及block块状水平盒子(布局)>background/border(装饰),因为这样更符合页面加载的功能和视觉呈现

层叠顺序实例

在这个例子中,inline-block属性的红色div,inline属性span > float:left属性图片 > block属性绿色div.但是有一点,blockdiv的文字会在inline-blockdiv背景色的上面,因为background层叠顺序最低

z-index与stacking context

定位元素默认z-index:auto可以看成是z-index:0

z-index不为auto的定位元素会创建层叠上下文(IE7除外,auto也会创建)

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

三个实例

在第一个例子中,应用了position:relative属性的图片z-index:auto,层叠顺序大于普通inline-block元素,所以定位图片覆盖普通图片

在第二个例子中,父容器设置position:absolute,子元素图片设置position:relative,这时,我们给图片添加z-index:-1,图片跑到背景色后面了,原因是设置了z-index的图片的层叠上下文元素是页面根元素;这时,我们再给父容器添加z-index:0,图片的层叠上下文元素变为父容器,此时,图片又回到背景色之上,因为z-index:-1层叠水平在层叠上下文背景色之上

第三个例子中,虽然第一个子元素设置z-index:999999,第二个子元素z-index:-1,但是它们的层叠上下文起作用的是父元素的z-index,所以第一个图片被第二个图片覆盖

其它属性与层叠上下文

其它参与层叠上下文的属性:

z-index值不为auto的flex项(父元素display:flex|inline-flex).

元素的opacity值不是1.

元素的transform值不是none.

元素mix-blend-mode值不是normal.

元素的filter值不是none.

元素的isolation值是isolate.

position:fixed声明(IE不支持)

will-change指定的属性值为上面任意一个.

元素的-webkit-overflow-scrolling设为touch.(移动端)

其它属性与stacking context实例

上面的实例展示了1-8条规则,我们设置8个div盒子,盒子里面放置了8张图片,然后给图片position:relative并且z-index:-1,这时,图片的层叠上下文元素是根层叠上下文,图片被背景色覆盖,然后我们在div盒子分别使用了8条规则,盒子变为层叠上下文,图片出现在背景色上面

这里有个问题,本来是8个图片,这里出现的只有7个,原因是同时存在transform和position:fixed的时候position:fixed失效,导致例7图片层叠上下文被覆盖

z-index与其它css属性层叠上下文

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

依赖z-index的层叠上下文元素的层叠顺序取决于z-index值

依赖z-index值创建层叠上下文的情况:

position值为relative/absolute或者fixed(非IE浏览器)

display:flex|inline-flex容器的子flex项

z-index与定位元素

这个例子中,我们先设置了一个图片层叠上下文,然后设置了一个父容器是flex,子元素z-index:1的层叠上下文;

这里,参与比较的是第一个图片层叠上下文,和flex的子元素图片层叠上下文,决定层叠顺序的是z-index的大小,也就是谁大谁在上面

层叠上下文导致的图片上的文字消失现象

这个例子有个现象,当动画在运行时,文字跑到图片后面去了,基于前面学到的东西,当opacity不为1时,是具有层叠上下文的,层叠级别跟z-index:auto一样,也就是跟absolute是同级的,基于谁大谁在上面的原则,图片会覆盖文字

解决方法:

调整DOM流先后顺序,将文字放在图片后面

提高文字的层叠顺序,例如z-index:1

z-index相关实践

1.最小化影响原则

目的:避免z-index嵌套层叠关系混乱

原因:

元素的层叠水平主要由所在的层叠上下文决定;

IE7 z-index:auto也会新建层叠上下文;

做法:

避免使用定位属性;

定位属性从大容器平级分离为私有小容器

可以参考relative相关实践

2.尽量不使用z-index大于2

目的:避免z-index混乱,一个元素比一个元素z-index大的样式问题

原因:多人协作及后期维护

做法:
对于非浮动元素,避免设置z-index值,z-index值没有任何必要超过2

3.组件层级计数器

目的:避免浮层组件因z-index被覆盖的问题

原因:

总会遇到意想不到的高层级元素

组件的覆盖规则具有动态性,比如说一个页面有若干个弹框

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

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

使用可访问性隐藏来解决表单提交按钮低版本浏览器兼容性问题

在本例中,可以使用z-index:-1隐藏原始的submit而使用美化过的label控制提交;如果不需要兼容低版本浏览器可以直接使用display:none

深入理解CSS中的层叠上下文和层叠顺序

云服务器 GPU云服务器 z-index Z-Index属性 z-index无效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112034.html

相关文章

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

    摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。 张鑫旭的CSS深入理解之z-index学习笔记 层叠上下文 什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。 如何产生层叠上下文？ 根元素具有根层叠上下文 z-index不为auto的定位元素 一个 z-index 值不为 ...

    Steven 评论0 收藏0

  • Web 组件化中如何管理 z-index

    摘要：接着我们解释我们所看到的现象。删除上述所说的运行效果这种架构并非没有缺点。例如，你将无法在和内创建此类叠加层查看示例然而，根据我的经验，这很少是一个问题。找到两个没有正确层叠的元素的第一个祖先组件，并根据需要更改该组件中的。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ z-index 属性，尽管已经写了这么多，仍然被广泛地误解和错误地处理。在复杂的单页web应...

    FrancisSoung 评论0 收藏0

  • Web 组件化中如何管理 z-index

    摘要：接着我们解释我们所看到的现象。删除上述所说的运行效果这种架构并非没有缺点。例如，你将无法在和内创建此类叠加层查看示例然而，根据我的经验，这很少是一个问题。找到两个没有正确层叠的元素的第一个祖先组件，并根据需要更改该组件中的。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ z-index 属性，尽管已经写了这么多，仍然被广泛地误解和错误地处理。在复杂的单页web应...

    yeooo 评论0 收藏0

  • z-index与堆叠上下文

    摘要：与堆叠上下文动机最近项目中同时使用和遇到一些问题，值设了很大，但是不起作用。总结设置且不为，将产生堆叠上下文，堆叠规则异于常规堆叠。，，生效产生堆叠上下文，分别是。此时生成堆叠上下文，其子元素最终为。 z-index与堆叠上下文 动机 最近项目中同时使用z-index和opacity遇到一些问题，z-index值设了很大，但是不起作用。找了一些资料，重新梳理了z-index的重叠规则。...

    Aldous 评论0 收藏0

  • 深入剖析z-index属性

    摘要：声明，部分浏览器需要数字配合指定的属性值为上面任意一个的作用增强页面渲染性能，即准备图形处理器让浏览器加速渲染的什么是图形处理器是与处理和绘制图形相关的硬件。而则是真正的行为触发之前告诉浏览器，提前预约从容不迫突然造访手忙脚乱。一、z-index七阶层叠顺序表 1.层叠顺序的大小比较： background/border < 负z-index < block块状水平盒子 < float浮动盒...

    scq000 评论0 收藏0

发表评论

登陆后可评论

0条评论

vincent_xyb

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<