Pressidian
花园入口
笔记
项目
关于
实验室
GitHub
花园入口
笔记
项目
关于
实验室
GitHub

KNOWLEDGE PATHS

笔记库
当前位置
笔记库/前端/三件套/样式/CSS/旧的

层叠上下文

1 分钟阅读 · Note

目录树 578 篇

              • 布局
              • 层叠上下文
              • 定位
              • 盒模型
              • 权重specificty
              • 水平垂直居中
              • hover
          • tailwindCSS
      • 前端技术栈
    • 笔记目录
    • CLAUDE.md
    • Vue 组件与 Render 函数

关联笔记 6

↗布局同一路径↗定位同一路径↗盒模型同一路径↗权重specificty同一路径↗水平垂直居中同一路径↗hover同一路径

HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

==子级层叠上下文的 z-index 值只在父级中才有意义==。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。 ![Pasted image 20250903165945](../../../../../_assets/14869a5-Pasted image 20250903165945.png)

总结:

  • 层叠上下文可以包含在其他层叠上下文中,并且一起创建一个层叠上下文的层级。
  • 每个层叠上下文都完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
  • 每个层叠上下文都是自包含的:当一个元素的内容发生层叠后,该元素将被作为整体在父级层叠上下文中按顺序进行层叠。