CSS Grid中重叠网格项设置不同z-index无效问题求助

你的问题出在：CSS Grid中，未设置非static定位的网格项，其z-index属性可能无法按预期触发堆叠上下文，导致堆叠顺序未改变。

解决方法 #

给需要控制堆叠顺序的网格项添加position: relative（或其他非static定位方式，如absolute），明确创建堆叠上下文，确保z-index生效。

修改后的代码 #

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 10px;
  position: relative;
}

.item1 {
  grid-area: 1 / 2 / 3 / 3;
  background-color: lightblue;
  position: relative;
  z-index: 1;
}

.item2 {
  grid-area: 1 / 2 / 3 / 3;
  background-color: coral;
  position: relative;
  z-index: 2;
}

HTML

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

原理说明 #

默认情况下，网格项是static定位，虽然Grid规范允许这类元素使用z-index，但部分浏览器的渲染逻辑会导致z-index不生效。添加position: relative后，元素会创建独立的堆叠上下文，z-index的优先级会被正确计算，此时z-index值更高的元素会显示在上方。

另外补充：如果不想使用定位，也可以调整HTML中网格项的顺序——后出现的元素默认会覆盖先出现的，但这不属于z-index控制的方案。

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