html - 位置：绝对和溢出：隐藏？

Question

我正在尝试在 div 中放置一些图像。只应显示一张图像。我用：

<div id="slideshow" style="width:600px;height:400px;position:absolute;overflow:hidden;"></div>
<img src="img3.png" width="600px" height="400px" id="img3" style="position:absolute;left:0px;">
<img src="img2.png" width="600px" height="400px" id="img2" style="position:absolute;left:600px;">
<img src="img1.png" width="600px" height="400px" id="img1"     style="position:absolute;left:1200px;">
</div>

但是图像从 div 溢出并且是可见的。我该如何解决？

Answer 1

让我们从修复您的标记开始...

<style>
#slideshow{
    width:600px;
    height:400px;
    position:absolute;
    overflow:hidden;
}

#slideshow img{
    width:600px;
    height:400px;
    float:left;
}
</style>

<div id="slideshow">
    <img src="img3.png" id="img3">
    <img src="img2.png" id="img2">
    <img src="img1.png" id="img1">
</div>

所以原因是因为你在父母和孩子中都定义了 position:absolute 。您可以将图像标签包装在相对定位的 div 中。这会将绝对位置重置为相对定位的父级的左上角。

但是，在这种情况下，您需要做的就是向左浮动。没有理由在幻灯片元素中使用绝对定位的子元素。