关于stacking context和CSS z-index的总结_html/css_WEB-ITnose
程序员文章站
2022-04-16 12:34:17
...
HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了。但是,往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习,总算搞清楚了其中的关系。简单总结如下: Stacking without z-index : Default stacking rules Stacking and float : How floating elements are handled Adding z-index : Using z-index to change default stacking The stacking context : Notes on the stacking context Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
- 只有Positioned(Position不为static的元素)元素的z-index属性才有效
- z-index可以是负数
- 没有z-index或z-index无效的元素(参见第一条)相当于z-index为0;
- 符合某些条件的元素,浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构,stacking context也会形成一个树形结构。
- 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
- z-index 0级元素中,有stacking context的元素的叠加顺序靠前
- 以上条件不能区分时,使用DOM树中的顺序决定叠加顺序。
其中细节很多,我也不确定自己的理解都是正确的。欢迎大家指正。
另外,下面是MDN中的一系列相关文章。逐层展开,写得很清楚,各位做WEB的同学可以学习一下。
上一篇: PHP贪婪算法的原理及用法
下一篇: win10无法连接sens,而且很卡
推荐阅读
-
关于z-index 那些你不知道的事_html/css_WEB-ITnose
-
关于css的简单问题,如果把Div和Span放到同一行?_html/css_WEB-ITnose
-
HTML+CSS总结/有关于web标准的总结_html/css_WEB-ITnose
-
CSS Stacking Context 里那些鲜为人知的坑_html/css_WEB-ITnose
-
关于css的简单问题,如果把Div和Span放到同一行?_html/css_WEB-ITnose
-
CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose
-
关于html的表单和css的问题_html/css_WEB-ITnose
-
关于CSS的一些总结_html/css_WEB-ITnose
-
求前台牛人解答关于z-index的问题_html/css_WEB-ITnose
-
关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose