Question

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

容器相对定位

.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; }

最后一个元素打破绝对位置的所有兄弟姐妹

1 个答案: