css-debug

诊断 CSS 和前端布局问题，涵盖定位、溢出、z-index 与 Tailwind 冲突等。

帮你定位并修复前端布局与样式问题——比如定位偏移、元素被裁剪、溢出、z-index 层叠、Tailwind 冲突或 React 渲染不可见等。遇到页面显示异常或组件样式失效时用。会先要 devtools 的结构和 computed styles，按排查清单给出可执行的修复步骤和示例代码。

# CSS Debug Skill

<command-name>css-debug</command-name>
<user-invocable>true</user-invocable>

## 使用场景

当用户遇到以下问题时使用此 skill：
- CSS 定位问题（元素位置不正确、被裁剪、溢出等）
- React 组件渲染问题
- Tailwind CSS 类不生效
- 绝对定位/相对定位问题
- Flexbox/Grid 布局问题
- z-index 层叠问题

## 调试步骤

### 1. 收集信息

首先向用户询问或获取：
- 浏览器开发者工具中的 HTML 结构
- 相关元素的 computed styles
- 父容器的 CSS 属性（特别是 position、overflow、display）
- 截图（如果有的话）

### 2. 常见问题检查清单

#### 绝对定位内容被裁剪
```
问题：position: absolute 的元素被父容器裁剪
检查：
- [ ] 父容器是否有 overflow: hidden 或 overflow: auto
- [ ] 祖先容器是否有 overflow: hidden
- [ ] 父容器是否设置了 position: relative
- [ ] 元素的 top/left/right/bottom 值是否超出父容器

解决方案：
1. 将 overflow: hidden 改为 overflow: visible
2. 或将绝对定位元素移到更外层的容器
3. 或使用 fixed 定位（相对于视口）
```