溢出隐藏不适用于网格中的绝对定位元素答案

【问题标题】：Overflow hidden not working for absolute positioned element in grid溢出隐藏不适用于网格中的绝对定位元素
【发布时间】：2020-12-17 06:37:12
【问题描述】：

我无法在 CSS 网格中隐藏绝对定位的图像。代码如下所示：

HTML：

<div class="relative-parent">
  <div v-for="item in 12" class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

这里的relative-parent是css-grid，重复的hidding-parent元素

CSS：

.relative-parent {
  position: relative;
  width: 500px;
  height: 500px;
  display: grid;
  place-items: center;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
}
.hiding-parent {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

我需要子元素是相对父元素的全宽。子元素都是一个图像，绝对定位，因此如果 overflow: hidden 对隐藏父元素起作用，它看起来就像图像被分成 12 个部分。

虽然在hiding-parent 上使用 position: relative 确实修复了隐藏，但它使每个图像成为隐藏父元素的宽度，这违背了目的。我不能在隐藏父级上使用 position: absolute 或 fixed，因为它会弄乱网格。

我对此有点迷茫，非常感谢一些帮助。谢谢！

【问题讨论】：

能否给出完整编译的html代码？我没有完全得到你想要的。绘图也会有所帮助。

标签： javascript html css vue.js

【解决方案1】：

链接： https://codesandbox.io/s/eager-worker-2pc5o?file=/src/App.js HTML：

    <div className="relative-parent">
      <div className="child item1">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item2">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item3">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item4">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item5">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item6">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item7">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item8">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item9">
        <img src="https://source.unsplash.com/random" />
      </div>
    </div>

CSS：

.relative-parent {
  display: grid;
  grid-gap: 5px;
  grid-template-areas:
    "one two three "
    "four five six "
    "seven eight nine";
}
.item1 {
  grid-area: one;
}
.item2 {
  grid-area: two;
}
.item3 {
  grid-area: three;
}
.item4 {
  grid-area: four;
}
.item5 {
  grid-area: five;
}
.item6 {
  grid-area: six;
}
.item7 {
  grid-area: seven;
}
.item8 {
  grid-area: eight;
}
.item9 {
  grid-area: nine;
}
.child {
  height: 200px;
  background: red;
}
.child img {
  width: 100%;
  height: 100%;
}

【讨论】：