CSS网格列扩展了过去的父母，绝对定位div

Question

我的父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>

overlay-itemdivs延伸了image-overlay Div。有任何建议吗？

Answer 1

图像(定义外套的宽度(位于外部包装器内部的一个容器中 - 因此，将inline-block添加到外包装器中确保外部包装器与由由宽度匹配的宽度匹配。图像。

还对您的代码进行了几个更改(以及删除内联样式(：

• 将grid-template-columns更改为1fr 1fr 1fr而不是33% 33% 33%，以便填充完全填充水平空间，

• 将display: block添加到img元素中，以删除图像下方的Whitespace(为此，任何 inline element (。

请参见下面的演示：

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

Answer 2

它最终是z索引问题。我需要将其添加到绝对的Div中，然后将其定位良好。