本文详解为何 outline 无法通过 z-index 控制层叠顺序，并提供使用 border + CSS Grid 的可靠方案，实现可开关的粗外框与细内线分离效果。
本文详解为何 `outline` 无法通过 `z-index` 控制层叠顺序，并提供使用 `border` + css grid 的可靠方案，实现可开关的粗外框与细内线分离效果。
在构建 Sudoku 网格时，开发者常希望通过 outline 实现“可开关”的粗边框（如 3×3 大格线），同时保留细内线（如 9×9 单元格线）。但直接为 .box 设置 z-index 并不能解决 outline 被 .cell 的 outline 覆盖的问题——根本原因在于：outline 不参与 CSS 堆叠上下文（stacking context），它始终绘制在元素自身内容、背景和边框的最顶层，且不受 z-index 影响。无论 .box 的 z-index 设为 100 还是 1000，其 outline 仍可能被相邻元素的 outline 视觉上“压住”，尤其在网格紧密排列时。
✅ 正确解法：用 border 替代 outline 实现大格线
border 是盒模型的一部分，受 z-index（需配合 position）和层叠上下文控制，更重要的是——它能与 outline 共存且天然分层：border 在内层，outline 在外层，视觉上自然形成“粗外框 + 细内线”的清晰结构。
以下是优化后的完整实现：
.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); /* 修正 alpha 写法 */
}
.box {
border: 2px solid black; /* ✅ 可控、可开关的粗外框 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
overflow: hidden;
}
.cell {
outline: 1px solid #999; /* ✅ 细内线，不影响布局 */
}
for (let i = 0; i <p>? 关键要点总结：</p>
- 永远不要依赖 outline + z-index 解决层叠问题：outline 无堆叠上下文，z-index 对其无效；
- border 是可控边框的唯一可靠选择：支持 display: grid 下的精准尺寸控制，且可通过 border: none 或 CSS 类动态开关；
- 避免 position: relative + z-index 的冗余操作：本例中 .box 和 .cell 无需定位即可自然分层（border 在内，outline 在外）；
- 使用 aspect-ratio: 1 替代固定宽高：提升响应式鲁棒性，防止因盒模型计算偏差导致网格变形。
如需动态切换粗外框（例如点击高亮某大格），只需添加/移除 .box.highlight { border-color: #007bff; } 类即可，完全不干扰布局或内线显示。
