lang
lang/typescript/css/index.md
medium
lang-typescript-css-index
CSS 布局陷阱索引（z-index / stacking context / overflow / flex / 100vh / sticky）。Use when 写或调 .tsx / .css / .scss 样式遇到层叠遮挡、溢出裁切、弹性挤压或定位失效问题。
子项索引
| 子项 | 一句话 |
|---|---|
| layout-traps skill | CSS 布局陷阱：z-index 生效条件 / stacking context / overflow 裁切 / flex min-width:0 / 100vh 抖动 / sticky 失效 |
TypeScript · CSS 布局陷阱
本层包含
| 名称 | 类型 | 一句话 |
|---|---|---|
| layout-traps | skill | z-index 只对定位元素生效 / 父级建 stacking context / overflow 裁切 / flex min-width / sticky 失效 |
何时下钻
- z-index 调大仍被遮挡，或父级 transform/opacity/filter 建了新 stacking context。
- overflow:hidden/auto 把子元素裁切、阴影或下拉被切。
- flex 子项压不下去、文本不换行(缺 min-width:0)。
- 100vh 在移动端含地址栏溢出、需 dvh/svh。
- position:sticky 不吸顶(父级 overflow 或缺定位上下文)。