前言----------最近工作中有同事遇到css的z-index与transfrom相互影响的问题,在此总结整理下。出现影响的原因就是对元素层叠上下文理解问题。
一 什么是层叠上下文,层叠水平,层叠顺序
层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就level更高一级。换句话说就是于网页中元素级别更高,离我们用户更近了。
“层叠水平”英文称作”stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。
普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。
“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。
二 层叠顺序----层叠规则------层叠特性
z-index负 < block < float < inline/inline-block < z-index:auto <z-index正
当元素发生层叠的时候遵循下面2个规则:
- 值大在上:当具有明显的层叠水平标示的时候,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。
- 后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
三 形成层叠上下文的属性
z-index(在设置position属性后生效)具体由值确定
opacity (opacity
的值不是1
的时候,是具有层叠上下文的,层叠顺序是z-index:auto
级别)
transform
filter
will-change
页面中用到很多transfrom z-index时候,会很烦,慎用太多!