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

Question

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

我知道在这个例子中可以重叠单元格-

Overlapping items in CSS Grid

但如示例所示，列和行是预先设置的。有没有办法在动态添加项目时选择一个网格项目以更改它的z-index？

网格项目是使用自动调整添加的。我可以通过添加这样的类来跨越多行-

$(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

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

这是物品放置的默认行为。浏览器永远不会使元素重叠，除非您通过在同一行/列上创建两个项目来明确定义这一点。 z-index 在这里也没有任何关系，因为它只是定义了堆叠顺序。

如果您想创建重叠，请考虑将宽度/高度更改为不会影响其他网格项目的过低。

例子：

.container {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  grid-auto-rows:50px;
  grid-gap:10px;
}
.container > div {
  border:2px solid; 
}

.row-2 {
  height:calc(200% + 10px); /* Span 2 rows (don't consider the gap)*/
  background:rgba(255,0,0,0.5);
  z-index:2;
}

.column-2 {
  width:calc(200% + 10px); /* Span 2 columns (don't consider the gap)*/
  background:rgba(0,255,0,0.5);
  z-index:2;
}
.row-3 {
  height:calc(300% + 2*10px); /* Span 3 rows (don't consider the gap)*/
  background:rgba(0,0,255,0.5);
  z-index:2;
}

* {
  box-sizing:border-box;
}

<div class="container">
  <div class="column-2"></div>
  <div class="row-2"></div>
  <div></div>
  <div class="row-3"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>