Html CSS网格列展开超过父级、绝对定位Div

我有一个相对定位的父div。它里面有一个设置div高度的图像。然后，里面有一个绝对位置div，它是网格显示。网格内的列正在扩展，超过父div，父div设置为100%。下面是一个代码示例

<div style="position:relative;">
  <div style="position:relative;">
    <img src="/imageurl" />
  </div>
  <div class="image-overlay" style="display:grid;grid-template-columns:33% 33% 33%;height:100%;position:absolute">
    <div class="overlay-item" style="height:100%">Item 1</div>
    <div class="overlay-item" style="height:100%">Item 1</div>
    <div class="overlay-item" style="height:100%">Item 1</div>
  </div>
</div>

项目1
项目1
项目1

overlay项

div超出了

图像覆盖

div。有什么建议吗？

图像（定义外包装的宽度）位于外包装内的容器中-因此，向外包装添加

内联块

可确保外包装与图像创建的宽度匹配

还对代码进行了一些更改（同时删除了内联样式）：

• 将

  grid template columns

  更改为

  1fr 1fr 1fr

  ，而不是

  33%33%33%

  ，使其完全填充水平空间

• 在

  img

  元素中添加了

  display:block

  ，以删除图像下方的空白（以及任何内联元素）

请参见下面的演示：

.wrapper{
显示：内联块；
位置：相对位置；
}
img{
显示：块；
}
.图像叠加{
位置：绝对位置；
排名：0；
左：0；
右：0；
显示：网格；
网格模板柱：1fr 1fr 1fr；
身高：100%；
}
.叠加项{
边框：1px实心卡德蓝；
}

项目1
项目1
项目1

它最终成为一个z指数问题。我需要将它添加到绝对div中，然后它就可以很好地定位了

所以它基本上归结为一个z指数问题。有一次，我添加了z-index:2，它可以工作。