CSS网格：是否可以通过针对动态创建的特定网格项目来更改z-index？

Question

我希望能够将鼠标悬停或单击一个网格单元，并具有隐藏的元素（如页脚）显示并与其他网格项目重叠，而不会影响整个网格布局。

我知道有可能在此示例中重叠单元格-

Overlapping items in CSS Grid

但是如示例所示，列和行是预先设置的。当项目动态添加时，是否有一种方法可以选择一个网格项以更改其z-index？

使用自动调整功能添加网格项目。我可以通过添加类似so-

的类来跨越多行

$(document).on('click', '.card-footer', function () {
        $(this).closest('.card').toggleClass('row-span');
});

    .row-span {
        grid-row: span 2;
        /*z-index: 1; doesn't work*/
        /*footer:nth-child(4) {  z-index: 1; } doesn't work */
    }  

html是通过ajax调用动态创建的，每个图像都以类似于-的模板添加到cards类中]

</div class="cards">
    <div class="card bg-light" id='${image.id}'>
    <div class="card-header">${image.header}</div>
    <div class="card-body">${image.body}</div>
    <div class="card-footer">${image.footer}</div>
</div>
css-

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, .25fr));
    grid-gap: 1rem;
    align-items: start;
    width: 100vw;
    padding-right: 6px;
        }
当我将此类添加到元素时，我只能使该网格项跨越多行，但这仍然会影响其他网格项。我不明白为什么我不能更改z-index以便与其他grid-items重叠，但是我可以更改grid-row: span value。

我希望能够将鼠标悬停或单击一个网格单元，并具有隐藏的元素（如页脚）显示并与其他网格项目重叠，而不会影响整个网格布局。我知道有可能...

Answer 1

我只能使那个网格项目跨越多行，但这仍然会影响其他网格项目