CSS 网格列展开过去的父项，绝对定位 Div

Question

我有一个父级 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。有什么建议吗？

Answer 1

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

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

将 grid-template-columns 更改为 1fr 1fr 1fr 而不是 33% 33% 33% 以便它填充水平 space完全，
向 img 元素添加了 display: block 以移除图像下方的白色 space（以及任何 内联元素 ).

参见下面的演示：

.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-index 问题。我需要将它添加到绝对值 div 中，然后它的位置就很好了。

CSS 网格列展开过去的父项，绝对定位 Div

CSS Grid Columns Expand Past Parent, Absolute Positioned Div

html

css

css-position

css-grid