css层叠上下文和层叠水平

页面中当元素发生层叠时如何显示。为何有的元素明明写在后面却被前者覆盖住了?为何z-index设置很大了,还是不显示?这些涉及到css中的层叠上下文,层叠水平等

层叠上下文

类似块级格式化上下文,是一个封闭的空间,用来限制内部元素的层叠水平在当前范围活动的。在同一个层叠上下文中,(元素、层叠上下文)的层叠水平按一定的规则排序、显示。

创建方式:

  • 根层叠上下文 天生就具有的
  • z-index为数值(默认为auto)的定位元素
  • webkit内核中fixed 无需z-index为数值
  • css3

层叠顺序

在这里插入图片描述

层叠规则

  • 谁大谁上:在同一层叠上下文中,谁的层叠水平大谁在上
  • 后来居上:层叠水平相同时,dom流后面的覆盖前面的

参考文献:
[1] Css世界

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章