参考文章：一篇通俗易懂的 CSS 层叠顺序与上下文：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551373&idx=2&sn=f4308981b08c1e347ed021a5afc3bcce&chksm=8025a14cb752285a36ec0907058e30201b407adae49eacd965e02960210ab1f68d206e54a4a6&mpshare=1&scene=1&srcid=1021vtDaQubapajhKFhw1PXO#rd
层叠顺序篇-个人总结
块和块；浮动和浮动；定位和定位；层叠上下文之间；默认情况越后面的元素层级越高
z-index:n>定位层>行内元素>行内块层>行内层>浮动层>块元素
定位层:position:" "
除了定位元素可以创建层叠上下文以外，还有如下几个属性也可以做到。以下来自MDN
-
根元素 (HTML),
-
z-index 值不为 “auto”的 绝对/相对定位，
-
一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
-
opacity 属性值小于 1 的元素
-
transform 属性值不为 “none”的元素，
-
mix-blend-mode 属性值不为 “normal”的元素，
-
filter值不为“none”的元素，
-
perspective值不为“none”的元素，
-
isolation 属性被设置为 “isolate”的元素，
-
position: fixed
-
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
-
-webkit-overflow-scrolling 属性被设置 “touch”的元素
总结
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
