分享人:顾仁鹏
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
凡事都有先后顺序,在CSS中,也是如此。一般情况下,元素都是在一个层面上,看不出差异。但是一旦元素之间出现了重叠,就不可能出现等同关系,就要有个先后顺序,这就产生了层叠顺序和层叠上下文,而z-index则是它们中的一部分。
层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。它是层叠元素的根本,两个层叠元素决定顺序,必须在同一个拥有层叠上下文元素中,也就是它们共同的父级或者祖先级。而作为一个拥有层叠上下文的元素自身严格的说它可以改变自己原先的层叠水平。
层叠水平英文称作”stacking level”,也可以叫层叠等级,决定了同一个层叠上下文中元素在z轴上的显示顺序。
w3school给出的定义是:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意:最重要的一点就是这个层叠顺序的前提是在同一个层叠上下文元素中!
谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。
后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
仅靠层叠顺序图,无法处理所有css和html元素层叠时的顺序,所以就有了上面两条黄金准则,他可以处理所有层叠情况。
层叠上下文的层叠水平要比普通元素高。
层叠上下文可以阻断元素的混合模式。
层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。
1. 页面根元素天生具有层叠上下文,称之为“根层叠上下文”。
2. z-index值为数值的定位元素的传统层叠上下文。
3. 其他CSS3属性。
根层叠上下文:指的是页面根元素,也就是滚动条的默认的始作俑者 html 元素。这就是为什么,绝对定位元素在left/top等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因。
对于包含有position:relative/absolute/fixed的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。
z-index值不为auto的flex项(父元素display:flex|inline-flex).
1.元素的opacity值不是1.
2.元素的transform值不是none.
3.元素mix-blend-mode值不是normal.
4.元素的filter值不是none.
5.元素的isolation值是isolate.
6.will-change指定的属性值为上面任意一个。
7.元素的-webkit-overflow-scrolling设为touch.
固定定位元素,滚动时被覆盖。
给需要在最上面的元素的z-index设置一个正值,形成层叠上下文。
1.transform改变overflow对absolute元素的限制
2.transform限制position:fixed的跟随效果
3.transform限制absolute的100%宽度大小
1.浮动元素与定位元素重叠
2.出现重叠的方法
定位 浮动 负margin
3.利用重叠布局
感谢大家观看
by: 顾仁鹏