即使设置了 z 索引，Div 轮廓也被覆盖

Question

我正在尝试创建一个数独网格，由 3x3 网格中的 9 个框组成，每个框包含 3x3 网格中的 9 个单元格。然而，即使我将框类的 z-index 设置为高于单元格类，框的轮廓也被其他框的单元格的轮廓覆盖。

我在 webdev 方面还是个新手，我真的很困惑如何解决这个问题！

谢谢！！

编辑：我试图避免使用边框，因为我希望能够打开和关闭粗框线，并且边框会导致事物调整大小。

我尝试将每个类的位置属性设置为静态以外的其他属性，但这似乎没有任何作用。

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

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

    //generate a box to hold 9 cells
    box.classList.add("box");

    //generate cells inside each box
    for (let j = 0; j < 9; j++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");

        box.appendChild(cell);
    }
    grid.appendChild(box);
}

.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);
    z-index: 1000;
    background: rgb(200, 200, 200, 50);
}

.box {
    outline: 2px solid black;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    z-index: 100;
    overflow: hidden;
    position: relative;
}

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

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

Answer 1

将

border

与

.box

元素一起使用，您不需要任何

z-index

配置

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

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

    //generate a box to hold 9 cells
    box.classList.add("box");

    //generate cells inside each box
    for (let j = 0; j < 9; j++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");

        box.appendChild(cell);
    }
    grid.appendChild(box);
}

.grid-container {
    width: 300px;
    aspect-ratio: 1;
    margin: 0 auto;
    border: 6px solid black;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    background: rgb(200, 200, 200, 50);
}
.box {
    border: 2px solid black;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    overflow: hidden;
}

.cell {
    outline: solid 1px #999;
}

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