[英]Overflow hidden not working for absolute positioned element in grid
I'm having trouble hiding an absolutely positioned image within a css grid.我无法在 css 网格中隐藏绝对定位的图像。 Here's what the code looks like:代码如下所示:
HTML: HTML:
<div class="relative-parent">
<div v-for="item in 12" class="hiding-parent">
<div class="child"></div>
</div>
</div>
Here, the relative-parent is the css-grid, with repeating hiding-parent elements这里,相对父级是 css-grid,重复隐藏父级元素
CSS: 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;
}
I need the child element to be the full width of the relative-parent.我需要子元素是相对父元素的全宽。 The child elements are all one image, absolutely positioned, so that if overflow: hidden works on the hiding-parent, it would look as if the image is split into 12 parts.子元素都是一个图像,绝对定位,因此如果溢出:隐藏在隐藏父级上工作,它看起来好像图像被分成 12 个部分。
While using position: relative on the hiding-parent does fix the hiding, it makes each image the width of the hiding parent element, which defeats the purpose.在使用 position: relative 时,hiding-parent 确实修复了隐藏,它使每个图像成为隐藏父元素的宽度,这违背了目的。 I can't use position: absolute or fixed on the hiding-parent, since it would mess up the grid.我不能使用 position: absolute or fixed on the hidden-parent,因为它会弄乱网格。
I'm a bit lost with this, and would really appreciate some help.我对此有点迷茫,非常感谢一些帮助。 Thank you!谢谢!
Link: https://codesandbox.io/s/eager-worker-2pc5o?file=/src/App.js HTML:链接: 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: 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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.