设置z-index后数独网格Box outline仍被Cell outline覆盖求助

outline 是绘制在元素边界外的装饰线，不属于元素的盒模型范畴，z-index 无法控制不同元素 outline 的层叠顺序。DOM 中后渲染的元素（比如右侧、下方的 Box 及其内部 Cell）的 outline 会自动覆盖先渲染的元素的 outline，这就是你遇到的 Box 线条被其他 Cell 线条盖住的原因。

这种方法既不会改变元素尺寸，又能通过 z-index 严格控制层叠关系，还方便切换边框的显示/隐藏：

修改后的完整代码 #

HTML #

<div class="grid-container" id="puzzle-grid"></div>

JavaScript #

for (let i = 0; i < 9; i++) {
    const grid = document.getElementById("puzzle-grid");

    const box = document.createElement("div");
    box.classList.add("box");

    for (let j = 0; j < 9; j++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        box.appendChild(cell);
    }
    grid.appendChild(box);
}

CSS #

.grid-container {
    width: 300px;
    height: 300px;
    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 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    position: relative; /* 为伪元素提供定位基准 */
}

/* 用伪元素模拟Box的边框 */
.box::after {
    content: '';
    position: absolute;
    inset: 0; /* 等价于top/left/right/bottom: 0 */
    border: 2px solid black;
    z-index: 10; /* 高于Cell的z-index，确保边框在最上层 */
    pointer-events: none; /* 不干扰Cell的点击等交互 */
}

.cell {
    outline: solid 1px #999;
    position: relative;
    z-index: 1;
}

方案优势 #

1. 不影响元素尺寸：伪元素采用绝对定位，不会挤占Box或Cell的布局空间，完美替代border会改变尺寸的问题。
2. 可控层叠关系：通过z-index明确让Box的模拟边框显示在Cell线条上方，彻底解决覆盖问题。
3. 方便切换显示：如果需要隐藏Box边框，只需给目标Box添加一个类（比如.no-border），然后添加CSS规则：

.box.no-border::after {
    display: none;
}

备选方案（简单但灵活性差） #

如果不想用伪元素，可以给Cell的outline设置内偏移，让它和Box的outline错开：

.cell {
    outline: solid 1px #999;
    outline-offset: -1px; /* 让Cell线条往内缩1px，避免和Box线条重叠 */
}

但这个方案的缺点是Cell线条会显得更“紧凑”，且当Box边框宽度调整时，需要同步修改offset值，灵活性不如伪元素方案。

内容的提问来源于stack exchange，提问作者SarlCagan93