gpt4 book ai didi

html - 为什么我的div隐藏在位置:absolute images?后面

转载 作者:太空宇宙 更新时间:2023-11-04 13:27:33 24 4
gpt4 key购买 nike

在这段代码中,我使用绝对定位将两个图像放在彼此之上,但是第二个带有 row 类的 div 似乎隐藏在图像后面。我怎样才能解决这个问题并让它出现在正确的位置(在图像之后)?

.composition {
position: relative;
}

.img-1 {
position: absolute;
top: 0;
left: 0;
}

.img-2 {
position: absolute;
top: 0;
left: 0;
}
<div class="row">
<div class="composition">
<img src="imgs/lenses.jpg" class="img-fluid img-1" alt="" />
<img src="imgs/mountain-1.jpg" class="img-fluid img-2" alt="" />
</div>
</div>

<div class="row">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita praesentium inventore iusto rem perspiciatis impedit.
</div>

最佳答案

如前所述,图像上的绝对定位导致 .composition 没有高度,并且其下方的 div 折叠在图像下方。

为什么两张图片都需要绝对定位?保留一张没有绝对定位的图像,以便 .composition 具有图像的高度。第二张图片可以完全覆盖第一张。

第一个图像保持在流中并保持高度,第二个 div 将保持在图像下方。

.composition {
position: relative;
}

.img-2 {
position: absolute;
top: 0;
left: 0;
}
<body>
<div class="row">
<div class="composition">
<img src="https://picsum.photos/id/237/100/100" class="img-fluid img-1" alt="">
<img src="https://picsum.photos/id/1021/100/100" class="img-fluid img-2" alt="">
</div>
</div>

<div class="row">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita praesentium inventore iusto rem perspiciatis impedit.
</div>

关于html - 为什么我的div隐藏在位置:absolute images?后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56029058/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com