html - 最后一个元素打破了绝对位置的所有 sibling

Question

我有一个容器 div，它有 5 个图像，都是绝对定位的。我已经为所有这些添加了 top 和 left 值，但是一旦您将最后一个元素定义为绝对定位，所有其他图像就会失去它们的位置并保持在顶部。

容器相对定位

.responsive-container{
   position: relative;
}

里面有图片

<img src="img/responsive-mac.png" id="res-mac">
<img src="img/responsive-laptop.png" id="res-lap">
<img src="img/responsive-tab.png" id="res-tab">
<img src="img/responsive-phone-portrait.png" id="res-ph-1">
<img src="img/responsive-phone-landscape.png" id="res-ph-2">

应用了以下 Css

.responsive-container{
    position: relative;
}
#res-mac{
    position: absolute;  width: 97%;  top: 0%;
}
#res-lap{
    position: absolute; width: 85%;  top: 232%;  left: 30%;
}
#res-tab{
    position: absolute;  width: 35%; top: 414%;  left: 7%;
}
#res-ph-1{
    position: absolute;  width: 20%;  top: 573%;  left: 36%;
}
#res-ph-2{
    position: absolute;  width: 25%;  top: 26%;  left: 28%;
}

在demo在这里，您只需从第 5 个图像中删除 position: absolute;，其他图像就会开始工作。问题不在于那个特定的图像，如果您完全删除第 5 个图像，第 4 个图像将开始做同样的事情。

我已尝试删除所有 css 和 javascript 以缩小原因范围，但它仍然无法正常工作。给了什么？

Answer 1

试试这个:

.responsive-container { height: 66px; }