本文解决 Sudoku 网格中 .box 外轮廓被 .cell 内轮廓遮盖的问题，核心在于避免滥用 outline 和 z-index，改用语义清晰、层叠可靠的 border + 标准文档流布局。
本文解决 sudoku 网格中 `.box` 外轮廓被 `.cell` 内轮廓遮盖的问题，核心在于避免滥用 `outline` 和 `z-index`，改用语义清晰、层叠可靠的 `border` + 标准文档流布局。
在构建 Sudoku 网格时，开发者常误以为 z-index 能直接控制 outline 的绘制顺序——但这是根本性误解：outline 不参与 CSS 层叠上下文（stacking context）的 z-order 排序，它始终绘制在元素自身内容及边框之上，且无法通过 z-index 提升或压低。因此，即使为 .box 设置 z-index: 100，其 outline 仍可能被相邻 .cell 的 outline 视觉覆盖，尤其当元素紧密排列、无明确定位上下文时。
正确的解决方案是：用 border 替代 outline 实现可开关的“粗分隔线”，并彻底移除无效的 z-index 声明。border 是盒模型的一部分，天然遵循层叠规则；配合 position: relative（非必需）或默认文档流，即可稳定呈现层级关系。
以下是优化后的关键代码：
.grid-container {
width: 300px;
aspect-ratio: 1; /* 替代固定 height，增强响应性 */
margin: 0 auto;
border: 6px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
background: rgba(200, 200, 200, 0.5); /* 修正 rgba 写法 */
}
.box {
border: 2px solid black; /* ✅ 可控、可切换的粗边框 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
overflow: hidden;
/* 移除 z-index 和 position: relative —— 无需额外层叠干预 */
}
.cell {
outline: 1px solid #999; /* ✅ 细线用 outline 无副作用，不占空间 */
/* 移除 z-index 和 position: relative —— 避免创建不必要的层叠上下文 */
}为什么这样更可靠？
- border 占据盒模型的 border-box 区域，渲染顺序由 DOM 结构和层叠上下文自然决定；
- outline 不影响布局，且始终绘制在元素最外层（包括 border 之上），适合仅作视觉强调（如焦点状态），不适合作为结构分隔线；
- z-index 仅对 position 为 relative/absolute/fixed/sticky 的元素生效，而原代码中未正确触发层叠上下文，导致设置失效。
动态开关粗边框的推荐方式：
利用 CSS 类名控制，而非内联样式，便于维护与复用：
.box {
/* 默认无粗边框 */
border: none;
}
.box.active {
border: 2px solid black; /* ✅ 通过 JS 切换 class 控制显隐 */
}// 示例：点击切换某 box 的粗边框
document.querySelectorAll('.box').forEach(box => {
box.addEventListener('click', () => {
box.classList.toggle('active');
});
});综上，Sudoku 网格的视觉层级问题本质是 CSS 渲染机制的理解偏差。放弃对 outline + z-index 的错误组合，回归 border 的语义化使用，不仅能解决问题，还能提升代码可维护性与可访问性（border 支持高对比度模式，outline 在部分场景下可能被系统覆盖）。
