我有一个容器 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 以缩小原因范围,但它仍然无法正常工作。给了什么?
最佳答案
试试这个:
.responsive-container { height: 66px; }
关于html - 最后一个元素打破了绝对位置的所有 sibling ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33367498/