如何使绝对定位的元素与页面的其余部分一起移动？答案

【问题标题】：How to make absolute positioned elements move with the rest of the page?如何使绝对定位的元素与页面的其余部分一起移动？
【发布时间】：2011-10-10 05:35:57
【问题描述】：

当我对一个对象进行绝对定位时，它会卡在那里。当您调整浏览器窗口的大小时，它会停留在那里，而其他对象会四处滑动，从而扼杀了整个点。

现在这只是给我的。显然，它适用于普通网站，例如您现在使用的网站。当您调整窗口大小时，所有内容都会移动并停留在其整体模板中。

如何通过绝对定位实现这一点？

【问题讨论】：

为什么必须使用绝对定位？听起来您所描述的是一个 css 液体布局。
对不起，什么是 css 液体布局？我想我也没有，只是更容易。那个家伙的回答虽然 VV 有效
流动布局是一种用于使网页扩展（liquid）浏览器大小的技术，包括调整大小。做一些研究，你就会明白我的意思。另外，我不知道“那个家伙”是谁。
alistapart.com/articles/negativemargins
感谢您的帮助！而那个人就是Rob W，但是方法有点瑕疵。这应该会更好。谢谢阿吉安！

标签： html css positioning

【解决方案1】：

您需要将绝对定位的 div 放在相对定位的 div 中。每当相对定位的 div 移动时，绝对定位的 div 也会随之移动。

<div class="relative" >
    <div class="absolute">absolute</div>
</div>

.relative{
    position:relative;
    top:100px;
    left:100px;
    width:500px;
    height:500px;
    background:blue;
}


.absolute{
    position:absolute;
    width:100px;
    height:100px;
    background:red;
    top:30px;
    left:50px;
}

在http://jsfiddle.net/w2EMu/查看工作示例

【讨论】：

【解决方案2】：

最好的解决方案是避免绝对定位。但是如果你使用它并且想要重新定位你的绝对对象，你可以注册一个 resize 方法。例如。 jQuery.resize() 并自己重新定位。如果您不使用 jQuery，则必须使用 document.addEventListener 和 document.attachEvent。

【讨论】：