前言受一些CSS交互的影响,给元素设置的z-index不会按照实际尺寸叠加。一直没搞懂原理。最近查阅了相关资料,做了一个小总结。Stackingcontext和stackingorder堆叠上下文(stackingcontent)在HTML中是一个三维的概念,即元素z轴。堆叠顺序是指堆叠时有特定的垂直显示顺序。CascadingCriterion谁大谁上当当在同一个级联上下文字段中有一个明显的级联级别指标,比如标识的z-index值,级联级别值大的会覆盖小的。当元素的堆叠层次和堆叠顺序相同时,DOM流中靠后的元素会覆盖靠前的元素。堆叠上下文的特点堆叠上下文具有以下特点:堆叠上下文的堆叠级别高于普通元素;堆叠上下文可以阻止元素的混合模式;层叠上下文可以嵌套,内部层叠上下文及其所有子元素受制于外部Cascading上下文;每个级联上下文独立于兄弟元素,即在执行级联变化或渲染时,只需要考虑后代元素;每个级联上下文都是自包含的,当元素被级联时,整个元素被认为是在父层叠上下文的层叠顺序中;当z-index值不为auto时,将为包含position:relative的定位元素创建一个堆叠上下文;位置:绝对;在FireFox/IE浏览器下包含位置声明的定位元素当其z-index不是自动时创建堆叠上下文的元素。HTML代码
