CSS 网格列扩展过去的父级，绝对定位的 Div答案

【问题标题】：CSS Grid Columns Expand Past Parent, Absolute Positioned DivCSS 网格列扩展过去的父级，绝对定位的 Div
【发布时间】：2019-05-02 01:47:19
【问题描述】：

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

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

overlay-item div 超出了image-overlay div。有什么建议吗？

【问题讨论】：

标签： html css css-position css-grid

【解决方案1】：

图像（定义外包装的宽度）位于外包装内的容器中 - 因此将inline-block 添加到外包装可确保外包装与图像创建的宽度匹配。

还对您的代码进行了一些更改（以及删除内联样式）：

将grid-template-columns 更改为1fr 1fr 1fr 而不是33% 33% 33%，以便它完全填充水平空间，
将display: block 添加到img 元素以删除图像下方的空白（以及任何内联元素）。

请看下面的演示：

.wrapper {
  display: inline-block;
  position: relative;
}

img {
  display: block;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100%;
}

.overlay-item {
  border: 1px solid cadetblue;
}

<div class="wrapper">
  <div>
    <img src="http://via.placeholder.com/400" />
  </div>
  <div class="image-overlay">
    <div class="overlay-item">Item 1</div>
    <div class="overlay-item">Item 1</div>
    <div class="overlay-item">Item 1</div>
  </div>
</div>

【讨论】：

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

【解决方案2】：

它最终成为一个 z-index 问题。我需要将它添加到绝对 div 中，然后它的位置很好。

【讨论】：