页面中当元素发生层叠时如何显示。为何有的元素明明写在后面却被前者覆盖住了?为何z-index设置很大了,还是不显示?这些涉及到css中的层叠上下文,层叠水平等
层叠上下文
类似块级格式化上下文,是一个封闭的空间,用来限制内部元素的层叠水平在当前范围活动的。在同一个层叠上下文中,(元素、层叠上下文)的层叠水平按一定的规则排序、显示。
创建方式:
- 根层叠上下文 天生就具有的
- z-index为数值(默认为auto)的定位元素
- webkit内核中fixed 无需z-index为数值
- css3
层叠顺序
层叠规则
- 谁大谁上:在同一层叠上下文中,谁的层叠水平大谁在上
- 后来居上:层叠水平相同时,dom流后面的覆盖前面的
参考文献:
[1] Css世界