Z-index 层叠上下文和层叠水平

SillyMonkey 发布于2019-08-29 15:12 / 659人阅读

摘要：还需要注意的一点是，具有层叠上下文的元素比普通元素要更靠近眼睛。需要记住的是，内部的层叠上下文及其子元素均受制于外部的层叠上下文，下面是层叠顺序，从远到近。定位元素与传统层叠上下文使用了或的定位元素，且的值是数字会产生叠上下文。

作者：心叶
时间：2018-04-27 11:49

第一步：基本概念。

层叠上下文是一个概念上的东西，学过编译原理的人应该对这里的上下文很清楚，而层叠不过就是一个词罢了，解释一下就是，根据层叠规则决定位置的一个环境。还需要注意的一点是，具有层叠上下文的元素比普通元素要更靠近眼睛。

层叠水平也是一个概念上的东西，用大白话说就是：在一个层叠上下文的环境下，里面的元素在z轴上的排列顺序的规则，而层叠顺序就是这里说的具体规则，是实践的东西。

第二步：层叠顺序。

需要记住的是，内部的层叠上下文及其子元素均受制于外部的层叠上下文，下面是层叠顺序，从远到近。

1.层叠上下文background/border；

2.负z-index；

3.block块状盒子模型；

4.float浮动盒子；

5.z-index为auto或看成0的不依赖z-index的上下文；

6.z-index为auto或看成0；

7.正z-index。

第三步：产生条件。

根层叠上下文（指的是页面根元素，也就是元素）。

定位元素与传统层叠上下文（使用了position:absolute、position:fixed或position:relative的定位元素，且z-index的值是数字会产生叠上下文）。

CSS3与新时代的层叠上下文:

1.一个被设置了display:flex的元素包含的元素对其设置z-index为数值时其会产生层叠上下文；

2.设置了opacity不为1的元素会产生层叠上下文；

3.设置了transform不为none的元素会产生层叠上下文；

4.设置了mix-blend-mode不为normal的元素会产生层叠上下文；

5.设置了filter不为none的元素会产生层叠上下文；

6.设置了isolation:isolate的元素会产生层叠上下文；

7.设置了-webkit-overflow-scrolling的元素会产生层叠上下文（移动端）；

8.设置了will-change的元素会产生层叠上下文。

私有云超融合服务器 html按钮层叠 html层叠顺序 html 层叠悬浮 html外部层叠样式

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

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

z-index

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

vincent_xyb 2019-08-29 12:38 评论0 收藏0
彻底理解z-index，看完还是只会无厘头的设置9999你打我~~~~

摘要：如果同级父元素不是层叠上下文元素就不需要看父元素的眼色了文章到这里就结束了，希望看完这篇文章的同学可以彻底理解。今天写代码用antd-mobile的checkbox时候，想在内容文本后面添加一个icon，并且需要对这个icon绑定事件，发现绑定之后怎么也点不中，调试发现原来被层层嵌套的dom元素盖住了，肯定是z-index在作祟。可是按照我之前对z-index的了解（自信满满）却怎么...

bladefury 2019-08-02 16:16 评论0 收藏0
彻底理解z-index，看完还是只会无厘头的设置9999你打我~~~~

摘要：如果同级父元素不是层叠上下文元素就不需要看父元素的眼色了文章到这里就结束了，希望看完这篇文章的同学可以彻底理解。今天写代码用antd-mobile的checkbox时候，想在内容文本后面添加一个icon，并且需要对这个icon绑定事件，发现绑定之后怎么也点不中，调试发现原来被层层嵌套的dom元素盖住了，肯定是z-index在作祟。可是按照我之前对z-index的了解（自信满满）却怎么...

RobinTang 2019-08-30 10:51 评论0 收藏0
彻底理解z-index，看完还是只会无厘头的设置9999你打我~~~~

摘要：如果同级父元素不是层叠上下文元素就不需要看父元素的眼色了文章到这里就结束了，希望看完这篇文章的同学可以彻底理解。今天写代码用antd-mobile的checkbox时候，想在内容文本后面添加一个icon，并且需要对这个icon绑定事件，发现绑定之后怎么也点不中，调试发现原来被层层嵌套的dom元素盖住了，肯定是z-index在作祟。可是按照我之前对z-index的了解（自信满满）却怎么...

gaosboy 2019-08-05 16:57 评论0 收藏0
z-index和层叠上下文

摘要：层叠上下文元素的特性层叠上下文的层叠水平要比普通元素高层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。层叠上下文特性里最后一条规则，每个层叠上下文都是独立的。 z-index基础介绍：三维坐标空间里，x轴通常用来表示水平位置，y轴来表示垂直位置，还有z轴来表示在纸面内外方向上的位置，像下面的图片一样： showImg(https://segmentfault....

Fundebug 2019-08-29 15:16 评论0 收藏0
z-index和层叠上下文

摘要：层叠上下文元素的特性层叠上下文的层叠水平要比普通元素高层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。层叠上下文特性里最后一条规则，每个层叠上下文都是独立的。 z-index基础介绍：三维坐标空间里，x轴通常用来表示水平位置，y轴来表示垂直位置，还有z轴来表示在纸面内外方向上的位置，像下面的图片一样： showImg(https://segmentfault....

Cruise_Chan 2019-08-05 13:45 评论0 收藏0