CSS 的层叠上下文是什么

向右看齐 2023-08-17 15:54 252阅读 0赞

层叠上下文是 HTML 中的一个三维的概念,每个层叠上下文中都有一套元素的层叠排列顺序。页面根元素天生具有层叠上下文,所以整个页面处于一个“层叠结界”中。

层叠上下文的创建:

  • 页面根元素:html
  • z-index 值为数值的定位元素
  • 其他 css 属性

    • opacity 不是 1
    • transform 不是 none
    • flex,z-index 不是 auto

层叠上下文中的排列规则,从下到上:

  • background/border
  • 负 z-index
  • block 块状水平盒子
  • float 浮动盒子
  • inline 水平盒子
  • z-index:auto, 或看成 z-index:0
  • 正 z-index

由此引申出:定位元素的z-index:0z-index:auto的区别是,前者会创建层叠上下文,影响布局。

转载于:https://www.cnblogs.com/wangxi01/p/11213912.html

发表评论

表情:
评论列表 (有 0 条评论,252人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS 层叠上下文什么

    层叠上下文是 HTML 中的一个三维的概念,每个层叠上下文中都有一套元素的层叠排列顺序。页面根元素天生具有层叠上下文,所以整个页面处于一个“层叠结界”中。 层叠上下文的创建: