您的位置:首页 > Web前端 > css

CSS中z-index层叠顺序

更多 2016/11/13 来源:css学习浏览量:1027
学习标签: z-index
本文导读:在WEB网页编程中,有时会出现多个元素的非期待重叠错误,或者层叠的顺序不对,普通元素的层叠顺序由元素在文档中的先后位置决定,后出现的会在上面,我们可以通过设置z-index来控制页面元素的层叠顺序,下面介绍有哪些CSS属性会影响元素的显示顺序,以及如何设置z-index的层叠顺序

一、什么是堆叠上下文

堆叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

 

二、CSS中z-index层叠顺序 (基于两个元素都没有形成 堆叠上下文 这个为基础)

即:(从低到高)


1、形成堆叠上下文环境的元素的背景与边框
2、拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)
3、正常流式布局,非 inline-block,无 position 定位(static除外)的子元素
4、无 position 定位(static除外)的 float 浮动元素
5、正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )
6、拥有 z-index:0 的子堆叠上下文元素
7、拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

 

三、如何触发一个元素形成 堆叠上下文

1、根元素 (HTML),
2、z-index 值不为 "auto"的 绝对/相对定位,
3、一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
4、opacity 属性值小于 1 的元素(参考 the specification for opacity),
5、transform 属性值不为 "none"的元素,
6、mix-blend-mode 属性值不为 "normal"的元素,
7、filter值不为“none”的元素,
8、perspective值不为“none”的元素,
9、isolation 属性被设置为 "isolate"的元素,
10、position: fixed
11、在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
12、-webkit-overflow-scrolling 属性被设置 "touch"的元素

 

收藏
222
很赞
152
您可能感兴趣