html - CSS 网格 : Is it possible to change z-index by targeting specific grid-items created dynamically?

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 调用动态创建的，每个图像都被添加到模板中的卡片类中，类似于-

</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-行:跨度值.

Answer 1

I am able to get only that grid-item to span multiple rows but this still affects the other grid items

这是元素放置的默认行为。浏览器永远不会使元素重叠，除非您通过在同一行/列上制作两个元素来明确定义它。此外，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>