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%，以使其完全填满水平空间
在display: block元素中添加了img，以删除图像下方的空白（因此删除了所有 inline元素）。

请参见下面的演示

.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

2 个答案: