#优质博文 #前端 #CSS #锚点定位 #layout #course
Solving Shrinkwrap: New Experimental Technique
好文，利用 CSS Anchor Positioning（锚点定位）和 Scroll-Driven Animations（滚动驱动动画）解决网页排版中“自动换行导致的容器宽度无法自动收缩（Shrinkwrap）”这一经典难题。

AI 摘要：本文提出了一种创新的 CSS 实验性方案，旨在解决困扰开发者多年的“Shrinkwrap”难题：当块级元素内的文本自动换行时，容器宽度依然占据最大可用空间而非紧贴文本内容的现象。
作者 Roman Komarov 通过巧妙结合 Anchor Positioning（锚点定位）进行尺寸测量，并利用 Scroll-Driven Animations（滚动驱动动画）将测量值跨层级传递给父元素，从而动态调整容器尺寸。尽管该技术在 HTML 结构上有一定要求且目前仍处于实验阶段，但它为实现真正的紧凑包裹效果（如聊天气泡、自适应提示框等）提供了全新的纯 CSS 路径。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心挑战与背景 (The Problem)
• 解释“Shrinkwrap”问题：当元素内的内容（如文本）自动换行时，CSS 的 shrink-to-fit 算法通常会让容器扩展到最大可用宽度，导致视觉上出现多余的空白。
• 回顾该问题在 CSS 规范（CSSWG）中长达十年的讨论，以及 text-wrap: balance 等新属性如何凸显了这一缺陷。

2. 技术实现原理 (The Base Technique)
• 结构设计： 采用四层嵌套 HTML 结构，包括容器、内容包装器、源元素和探测元素 (probe)。
• 远程测量 (Remote Dimension Measuring)： 利用 Anchor Positioning（锚点定位）来确定内部行内元素的边界。
• 数值传递： 结合 Scroll-Driven Animations（滚动驱动动画）和自定义属性（CSS Variables），将测量到的像素值转换成可以在父元素中使用的数值，从而动态设置 inline-size（行向尺寸）。

3. 代码实现与 API (Code & Limitations)
• 展示核心 CSS 代码，利用 @property 定义变量，通过 animation-range 和 view-timeline 实现尺寸捕捉。
• 使用限制： 元素必须仅包含 Phrasing Content（短语内容，即行内元素）；目前主要在 Chrome 和 Safari 中运行，且 Safari 存在某些实验性 Bug。
• API 定义： 提供 --sw-limit（限制宽度）和 --sw-padding（间距调整）等自定义属性。

4. 进阶复杂场景 (Complex Content)
• 多锚点策略 (Multiple Explicit Anchors)： 演示如何处理具有多个 Flex（弹性布局）或 Grid（网格布局）项的容器包裹。
• 链式锚点 (Chained Anchors)： 针对不确定数量的项目，提出一种基于容器查询（Container Queries）和锚点链的自动化测量方案（目前仅 Chrome 支持较好）。
• 内容重复法： 探讨解决导航菜单等具有复杂相互依赖关系的布局方案。

5. 实际应用案例 (Use Cases)
• 聊天气泡 (Chat Bubbles)： 让气泡背景完美贴合换行后的文本，保持美观的视觉边距。
• 表单分组标题 (Fieldsets and Legends)： 解决 legend 标签在换行时导致的边框对齐问题。
• 覆盖图注 (Overlay Image Captions)： 实现图片上的半透明遮罩背景随文本长度动态收缩。
• 提示框 (Tooltips)： 优化设计系统中的气泡提示，使其在不同文本长度下都能保持紧凑。

6. 总结与未来趋势 (What's Next)
• 作者呼吁浏览器厂商提供原生的 CSS 属性或函数来简化这一过程。
• 强调简单场景的解决方案已趋于成熟，而跨依赖的复杂布局仍是未来探索的方向。

author Roman Komarov

kizu.dev

Solving Shrinkwrap: New Experimental Technique

In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions…

#GitHub #开源 #AI #新动态
GitHub 正在讨论开源项目维护者如何应对日益增加的低质量、AI 生成的拉取请求（PR），可能包括允许用户完全禁用 PR，或者至少限制 PR 只能由协作者访问等操作，可以在这里参加讨论：Exploring Solutions to Tackle Low-Quality Contributions on GitHub

GitHub

Exploring Solutions to Tackle Low-Quality Contributions on GitHub · community · Discussion #185387

Hey everyone, I wanted to provide an update on a critical issue affecting the open source community: the increasing volume of low-quality contributions that is creating significant operational chal...

#碎碎念
忘记了之前在哪里看过的话了，AI 越🔥确实真的会越有种“啊终于有人能懂我们写代码或者说 build 东西的快乐了”（（
以前说业余爱好是写代码，人家会说有毒吧x
现在说业余爱好是 Vibe Coding （嗯理解？）
纯属娱乐碎碎念

#优质博文 #前端 #性能优化 #JavaScript
The Browser Hates Surprises

AI 摘要：文章指出，浏览器的渲染引擎实际上是一个高效的约束求解器。当开发者中途“惊吓”浏览器（如延迟加载图片、动态插入滚动条等）时，会强制触发回流（Reflow），导致累积布局偏移（CLS）和用户体验的卡顿（Jank）。作者通过对比实验，提出了四种具体的优化方案：利用 scroll-margin-top 处理粘性布局遮挡、使用 scrollbar-gutter 预留滚动条空间、配置 aspect-ratio 预留图片位置，以及通过 Promise.all 编排数据加载。核心观点是：优化不仅是为了更快的加载，更是为了实现更平稳（Calm）的渲染。

author Durgesh Rajubhai Pawar

Frontend Masters

The Browser Hates Surprises

We often treat the browser like a canvas — a blank slate waiting for us to paint pixels. But this mental model is flawed. The browser isn’t really a painter; it’s a constraint solver.

#优质博文 #前端 #CSS
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions

AI 摘要：本文探讨了在复杂前端界面开发中，传统 CSS 命名规范（如 BEM）以及现代抽象工具（如 Tailwind 或 CSS-in-JS）的局限性。作者重点介绍了现已达成 Baseline 兼容的 CSS @scope 特性。@scope 允许开发者在不牺牲 CSS 级联（Cascade）和继承特性的前提下，实现精确的样式隔离。通过支持“甜甜圈作用域（Donut Scoping）”和引入邻近性（Proximity）原则，@scope 有效解决了样式泄露和特异性（Specificity）战争问题，为构建现代、可维护的 UI 提供了一种更符合原生 Web 标准的替代方案。

author Blake Lundquist

Smashing Magazine

CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine

Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to write CSS that can keep up with modern front ends?

#优质博文 #前端 #CSS #grid #新特性
CSS Bar Charts Using Modern Functions | CSS-Tricks：本文介绍了如何利用 CSS 现代函数 sibling-index() 和升级后的 attr() 函数（可以接受 data- 属性），以更简洁、高效的方式构建纯 CSS 柱状图。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心技术原理 (Core Technical Principles)
• 使用 display: grid 创建图表容器，并通过 grid-template-rows: repeat(100, 1fr) 建立百分比基准。
• 引入 sibling-index() 函数：自动为列表项分配连续的 grid-column 索引，无需手动编写选择器或 CSS 变量。
• 引入增强版 attr() 函数：直接从 HTML 的 data-value 属性中读取数值，并将其转换为 CSS 可用的 <number> 类型，用于控制 grid-row 的跨度 (span)。

2. 自动布局实现 (Automatic Layout Implementation)
• 详细拆解 sibling-index() 的工作方式：如何智能生成网格顺序，减少对 nth-child 等样式的依赖。
• 解释 attr(data-value number) 的类型转换功能：如何将字符串属性无缝转换为网格行数。
• 探讨浏览器兼容性：目前在 Chrome 和 Safari 中已有支持，但 Firefox 和部分移动端浏览器仍待完善。

3. 多样化图表应用 (Diverse Chart Applications)
• 纵向柱状图：通过调整 grid-row 的起始和结束位置改变增长方向。
• 标记图表 (Marker Charts)：跳过完整的柱条，仅在特定网格点显示标记元素。
• 横向柱状图：交换行与列的逻辑，实现水平方向的数据展示。

4. 历史回顾与演进 (Historical Evolution)
• 对比 2015 年至 2022 年间的传统图表实现方法（如利用伪元素、手动 Grid 布局及 CSS 自定义属性）。
• 强调新技术如何通过减少“黑科技” (Hacks) 和冗余代码来优化开发流程。

author Preethi

CSS-Tricks

CSS Bar Charts Using Modern Functions | CSS-Tricks

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

#AI #prompt
抽了一个 /extract-template 命令用来将复杂项目抽离为模版项目感觉挺好用的，安利一下，一键抽模版项目！

根据当前项目的技术架构，为我抽离出模版项目，让我们一步步思考要保留哪些作为模版

#CSS #前端 #新特性
💡 CSS Tip!：介绍如何利用 CSS 新特性 calc-size() 在 clamp() 函数中使用 auto 等尺寸关键字
挺新的，MDN 在这里

💡 CSS Tip!

Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!

https://css-tip.com/clamp-auto/

The same applies to all the sizing values (min-content, max-content, fit-content, etc.)

Anthropic 发布 Claude Opus 4.6，支持 200K 上下文窗口和自适应思考模式

Anthropic 发布新一代 Claude Opus 4.6 模型，支持 200K 上下文窗口（测试版提供 100 万 token），最大输出 token 数提升至 128K，较前代 64K 限制翻倍。该模型引入自适应思考模式，可根据问题复杂度动态调整思考深度，并新增最高级别的 max effort 参数。

新版本还推出上下文压缩功能，当对话接近窗口限制时自动总结早期内容，实现近乎无限长度的对话。数据驻留控制允许用户指定模型推理运行位置，可选择全球或仅限美国路由。Anthropic 同时宣布多项旧功能将被弃用，包括传统思考模式和输出格式参数。

Claude API Docs

🍀在花频道 🍵茶馆聊天 📮投稿

via 科技圈🎗在花频道📮 - Telegram Channel

#优质博文 #CSS #动画 #前端 #新特性
Elastic/Bouncy Text Effect：仅使用纯 CSS 实现一种有趣的悬停弹跳文字动画。目前该效果属于实验性特性，仅支持 Chrome 浏览器。

AI 摘要：这篇文章介绍了如何仅使用纯 CSS 实现一种有趣的弹性文字（Elastic/Bouncy Text）效果。作者 Temani Afif 通过组合使用最新的 CSS 特性，如 shape() 函数、 sibling-index() / sibling-count() 索引函数以及 linear() 缓动函数，实现了文字在悬停时的动态曲线跳动。虽然该技术目前仅支持 Chrome 浏览器且对 HTML 结构有特定要求（如每个字母需独立包装并使用等宽字体），但它展示了现代 CSS 在路径动画和动态计算方面的强大能力。

author Temani Afif

Css-Tip

Elastic/Bouncy Hover Effect

A few lines of modern CSS to create a fancy elastic effect on hover

#优质博文 #HTML #性能优化 #前端
Performance-Optimized Video Embeds with Zero JavaScript

AI 摘要：本文介绍了一种利用原生 HTML 标签 <details> 和 <summary> 来优化视频嵌入（Video Embeds）性能的创新方法。通过这种方案，开发者可以在完全不使用 JavaScript 的情况下实现视频的按需加载（Lazy Loading），有效降低页面初始加载时的资源消耗，显著提升首次内容绘制（First Contentful Paint, FCP）和最大内容绘制（Largest Contentful Paint, LCP）等性能指标。该方法不仅能防止累积布局偏移（Cumulative Layout Shift, CLS），还具备原生辅助功能支持，是替代传统重型第三方视频插件的高效方案。

author Stefan Bauer

#优质博文 #CSS #前端 #新特性 #html
Nice Select · February 3, 2026
本文展示了如何利用最新的 CSS 特性（如 appearance: base-select ）在保持原生无障碍性的同时，打造高度可定制且视觉华丽的 <select> 下拉组件。
真的很酷，Codepen 示例

AI 摘要：这篇文章深入探讨了使用现代 CSS 增强原生 <select> 元素的技术。通过 appearance: base-select 这一新特性，开发者可以在保留浏览器内置无障碍支持和键盘导航的基础上，完全自定义下拉框的样式。文章详细列举了锚点定位 (Anchor Positioning)、滚动驱动动画 (Scroll-driven animations)、滚动状态查询 (Scroll-state queries) 以及 ::picker() 等伪元素的应用。虽然目前主要在 Chrome 中提供最佳体验，但其渐进增强 (Progressive enhancement) 的设计思路确保了在其他浏览器中的基本可用性。

author Adam Argyle

nerdy.dev

Nice Select

Building a modern custom select with base-select.

#优质博文 #前端 #React #性能优化
Cache components in Next.js: Faster pages with partial pre-rendering

AI 摘要：文章深入探讨了 Next.js 的新特性——缓存组件（Cache Components）。传统 Next.js 路由通常被视为整体的静态或动态，而缓存组件打破了这一限制，允许开发者在组件粒度决定哪些部分可以被缓存复用。通过结合局部预渲染（Partial Pre-rendering, PPR）和 Suspense，缓存组件能够让页面立即渲染静态外壳（Static Shell），并渐进式地流式传输动态内容，从而将首屏白屏时间从数秒降低至毫秒级，极大地提升了用户体验和服务器效率。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 局部预渲染 (Partial Pre-rendering, PPR) 的演进
• 现代网页通常由可预测的布局数据、偶尔变化的各种内容以及必须实时计算的个性化数据组成。
• PPR 允许页面分阶段渲染：首先发送静态外壳（Static Shell）以建立结构，而动态部分则包裹在 Suspense 边界（Suspense boundaries）中独立处理。
• 虽然 PPR 改善了交付方式，但它默认在每次请求时重新运行动态部分，无法直接复用渲染结果。

2. 缓存组件 (Cache Components) 核心概念
• 缓存组件将缓存决策从路由级别移至组件级别（Component level），解决了 PPR 的复用局限。
• 开发者可以使用 'use cache' 指令标记特定的 UI 部分，使其在多次请求之间复用渲染输出。
• 在多次请求中，被标记为缓存（C）的组件直接读取存储结果，而动态（D）组件则继续按需在服务器上运行。

3. 配置与代码实践
• 在 next.config.ts 中开启实验性功能标志 useCache: true 以启用组件级缓存。
• 通过自定义缓存配置文件（Cache Profiles）来管理数据的保鲜度（Stale）、重新验证（Revalidate）和过期（Expire）时间。
• 使用 cacheLife() 函数在组件内定义具体的缓存策略，并通过 Suspense 配合加载占位图（Loading Skeleton）来隔离慢速数据源。

4. 性能对比与最佳实践
• 性能对比显示：使用缓存组件后，首屏内容呈现时间（Time to First Content）从约 7 秒骤降至 100 毫秒以内。
• 渲染模型从“全或无”（All-or-nothing）转变为“渐进式渲染”（Progressive rendering）。
• 最佳实践建议：不要在缓存组件中混用运行时 API（Runtime APIs）、保持清晰的 Suspense 层次结构、仅缓存确定性的 UI 部分（如导航、产品列表）。

author Temitope Oyedele

LogRocket Blog

Cache components in Next.js: Faster pages with partial pre-rendering - LogRocket Blog

Speed up Next.js apps by caching predictable components and streaming dynamic data with partial pre-rendering and Suspense.

#tools #工具 #开源
Rabithua/Rote 一个追求简约交互、支持私有化部署并提供开放 API 的个人笔记仓库

在线体验：Demo 演示地址 | 官方网站：Rote.ink | 移动端：iOS App Store

• 极致简约：追求克制的交互设计，提供优雅且低心智负担的记录体验。
• 数据自主：用户完全掌控个人数据，支持自由导出，无数据绑架。
• 开放性：提供 Open API 接口，支持在任何场景下进行数据记录或获取。
• 多端支持：除了 Web 端，还提供更优雅的 iOS 客户端原生体验。
• 内容形态：支持碎片化笔记，并提供独立的 Markdown 文章支持，用于纯粹的读写体验。

AI 摘要：Rote 是一个设计独特的个人笔记系统，强调克制、优雅的交互体验和极低的使用心智负担。它采用前后端分离架构，支持通过 Docker 或 Dokploy 一键私有化部署 (Self-Hosted)，确保用户对数据的绝对控制权。除了支持 Markdown 文章和 iOS 原生客户端外，Rote 还提供了完备的开放接口 (Open API)，允许用户在各种场景下自由地记录与导出数据，拒绝数据绑架。

author Rabithua

GitHub

GitHub - Rabithua/Rote: A personal note repository that looks different🤔

A personal note repository that looks different🤔. Contribute to Rabithua/Rote development by creating an account on GitHub.

#优质博文 #React #CSS #设计 #前端 #demo
好喜欢！

React Tilt Button - 3D Tactile React Button Component：一个具备 3D 触感、支持倾斜和深度效果的 React 交互按钮组件。它利用 CSS 的 3D 变换（3D Transforms）技术，为传统的按钮元素注入了物理深度（Depth）和动态倾斜（Tilt）效果。组件不仅内置了从复古游戏（Arcade）到现代金属（Steel）等多种预设主题，还开放了高度细粒度的自定义参数，让开发者可以轻松调整按钮的海拔高度（Elevation）、圆角（Radius）及光泽感（Glare），从而打造出极具表现力的用户界面。

GitHub 地址 https://github.com/archisvaze/react-tilt-button

#优质博文 #CSS #Chrome #无障碍 #新特性
Try text scaling support in Chrome Canary：介绍 Chrome Canary 中新增的 <meta name="text-scale"> 标签，该功能允许网页响应移动端操作系统的全局字体大小设置。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 特性概览与背景
• Chrome Canary 现已支持通过 <meta name="text-scale" content="scale" /> 标签来响应系统级的文本缩放。
• 解决了 iOS 和 Android 用户在系统设置中调大字体后，网页内容依然保持原样的问题。
• 该提案已正式进入 CSS Fonts 5 规范，旨在提升移动端网页的无障碍 (Accessibility) 体验。

2. 为什么需要手动开启 (Opt-in)
• 自动强制缩放会导致大量现有网站布局崩溃（例如 LinkedIn 在强制缩放下的导航栏重叠问题）。
• 遵循 WCAG 2.2 标准中关于“调整文本大小 (Resize Text)”和“屏幕回流 (Reflow)”的指南。
• 类似于早期的移动端视口 (Viewport) 标签，需要开发者确认网页能够处理非标准的文字比例。

3. 开发者适配指南
• 技巧 1：不要在 CSS 中覆盖初始字号 (Initial font size)。避免在 :root 级硬编码 px 数值，否则缩放将失效。
• 技巧 2：仅对内容（文字、图标、图像）使用字体相对单位 (Font-relative units)，如 em 或 rem。
• 技巧 3：布局间距（如 padding、margin 或 gap）建议使用固定单位（如 px），以为放大后的文字腾出更多回流空间。
• 技巧 4：在 320px 宽度且 200% 缩放的极端条件下进行测试，确保网站在窄屏手机上依然可用。

4. 未来挑战与展望
• 探讨大标题 (Heading) 与正文 (Body) 缩放比例的差异化处理，避免标题过大导致排版异常。
• 期待其他主流浏览器在未来跟进支持该标准。

author Josh Tumath

#前端 #新动态 #rust
Yarn 6 预览版发布，为了极致性能正转向使用 Rust 语言重构，预计 2026 年 Q3 发布稳定版。

你也锈化啊（

Yarn

Yarn 6 Preview | Yarn

Yarn is a modern JavaScript package manager focused on speed, security, and reliability.

cosine - 前端人の日常频道

#Newsletter #前端 #周刊更新 周刊第 24 期，这周也在肝项目，所以周刊短短的x FE Bits Vol.24 | Rolldown 1.0 RC、Anime.js v4.3 自动布局与 Chrome 145 100vw 滚动条感知

#Newsletter #前端 #周刊更新
周刊第 25 期！
这周是休闲追番余弦！1月新番和辉夜姬看爽了。
Vol.25 | Yarn 6 将用 Rust 重写，CSS Grid Lanes 进展

cos

FE Bits Vol.25 | Yarn 6 将用 Rust 重写，CSS Grid Lanes 进展 | 周刊 | 余弦の博客

本期网址 \ 本周刊更新时间期望是在每周天。\ 推荐订阅本周刊的 RSS。\ 公众号 前端周周谈 FE Bits，点击阅读原文链接可查看原文。\ QQ 讨论小群 598022684 / Discord 群\ 本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。 今天是 2026 年...

#优质博文 #AI #前端
Vercel 的最新研究表明，在针对 Next.js 16 开发的最新评估中，他们发现将 8KB 的压缩后的文档索引塞进 AGENTS.md 文件比使用 skills 效果更好，因为 skills 无法可靠地触发。

原文如下，还挺符合直觉的。

我们原本以为技能测试能够解决编码代理学习框架特定知识的问题。但在构建了专注于 Next.js 16 API 的评估系统后，我们发现了一些意想不到的情况。

直接嵌入 AGENTS.md 中的 8KB 压缩文档索引实现了 100% 的通过率，而即使有明确的指令告知代理使用技能，技能的最高通过率也仅为 79%。如果没有这些指令，技能的表现甚至不如完全没有文档。

AI 编码代理依赖于会过时的训练数据。Next.js 16 引入了诸如 'use cache' 、 connection() 和 forbidden() 等 API，而这些 API 并不包含在当前的模型训练数据中。当代理不了解这些 API 时，它们会生成错误的代码或回退到旧的模式。
反过来也可能出现这种情况，即您运行的是较旧的 Next.js 版本，而模型却建议使用项目中尚不存在的较新 API。我们希望通过让代理访问版本匹配的文档来解决这个问题。

author Jude Gao Software Engineer, Next.js

Vercel

AGENTS.md outperforms skills in our agent evals - Vercel

A compressed 8KB docs index in AGENTS.md achieved 100% on Next.js 16 API evals. Skills maxed at 79%. Here's what we learned and how to set it up.

#优质博文 #CSS #前端 #层叠上下文 #course
Unstacking CSS Stacking Contexts — Smashing Magazine
非常好的好文章！条理清晰，深入剖析 CSS 层叠上下文 (Stacking Contexts) 的工作原理，解释为什么 z-index 会失效，并提供实用的调试技巧与解决方案。

被安利了 Better CSS Stacking Contexts 这个 vscode 插件

AI 摘要：这篇文章详细介绍了 CSS 中层叠上下文 (Stacking Contexts) 的核心逻辑，解决了开发者经常遇到的 “为什么设置了 z-index: 9999 元素还是被遮挡” 的困惑。作者将层叠上下文比作“文件夹”，解释了一旦元素被困在父级文件夹中，其 z-index 就只能在内部生效。文章分析了 opacity、transform 等属性如何意外触发层叠上下文，并提供了针对模态框 (Modal)、下拉菜单 (Dropdown) 和工具提示 (Tooltip) 等常见场景的调试清单与修复方案（如 HTML 重构、Portal 传送门、以及 isolation: isolate 属性的应用）。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 层叠上下文的基础概念 (Understanding Stacking Contexts)
• 文件夹比喻：网页像桌面，HTML 元素像纸张。层叠上下文就像“文件夹”，文件夹内的纸张（子元素）无论 z-index 多高，都无法超越文件夹本身的层级。
• 黄金法则：子元素的 z-index 仅在当前文件夹内部有效。浏览器首先对文件夹（父级上下文）进行排序，然后再排序其内部的纸张。
• 触发因素：除了定位属性外，opacity (透明度)、transform (变换)、filter (滤镜) 和 contain (包含) 等属性也会因为浏览器性能优化（GPU 加速）而自动创建新的层叠上下文。

2. 常见问题场景分析 (The “Unstacking” Problem)
• 被困的模态框 (The Trapped Modal)：当模态框的父容器（如 Header）层叠顺序低于主体内容时，模态框即便设置极高 z-index 也会被遮挡。
• 没顶的下拉菜单 (The Submerged Dropdown)：导航栏与主体内容的父子层级关系导致菜单显示在下方内容之后。
• 被裁剪的工具提示 (The Clipped Tooltip)：overflow: hidden 会无视 z-index 直接裁剪超出边界的内容，这是另一种特殊的层叠陷阱。

3. 调试与排查工具 (Identifying The Trapped Layer)
• 调试清单：从问题元素开始，逐级向上检查 DOM 树，寻找可能触发层叠上下文的 CSS 属性。
• 高级工具：利用浏览器（如 Edge/Firefox）的 3D 视图查看层级；使用 “CSS Stacking Context Inspector” 插件或 VS Code 插件进行可视化排查。

4. 解决方案与最佳实践 (Unstacking And Regaining Control)
• 重构 HTML 结构：将模态框等组件移出嵌套容器，直接放在 <body> 下，这是最彻底的修复方式。
• 调整父级上下文：修改父容器的 z-index 或移除不必要的上下文触发属性。
• 传送门 (Portals)：在 React/Vue 框架中使用 Portal 技术将组件逻辑上保留在原位，但在 DOM 上渲染到顶层。
• 无副作用的隔离 (isolation: isolate)：利用 isolation 属性显式创建层叠上下文，有效解决负 z-index 导致的背景遮挡问题，且不会像其他属性那样产生布局副作用。

author Gabriel

Smashing Magazine

Unstacking CSS Stacking Contexts — Smashing Magazine

In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly useful, but they’re also widely misunderstood and often…