如果元素的位置是绝对的，浏览器的渲染是不是会重排？

Posted 2023-02-21

【中文标题】如果元素的位置是绝对的，浏览器的渲染是不是会重排？

【英文标题】：Does the browser's render reflow if element's position is absolute?如果元素的位置是绝对的，浏览器的渲染是否会重排？

【发布时间】：2011-11-12 09:40:29

【问题描述】：

如果我有一个具有绝对位置的元素并且我将其更改为左侧并且顶部位置将重排到它的父子级？如果他们自己的孩子不受影响，因为他们也被左轴和上轴绝对定位，那么他们自己的孩子呢？

如果我更改了元素的宽度/高度，但在父元素和子元素中都没有重要性？

【参考方案1】：

具有绝对位置的对象不会影响页面的布局。页面的布局不考虑绝对定位的对象。移动绝对定位的对象不会引起其他对象的任何回流。

使用绝对定位移动对象将导致其子对象随之移动。它不会重排它们，它们只会随着它们的父容器一起移动。

【讨论】：

谢谢！很高兴知道。此规则适用于 IE6 和 IE7+？

适用于所有浏览器。这就是绝对定位的工作原理。

浏览器重排行为可能非常令人惊讶（尤其是 IE），所以我认为这种简单的响应是不必要的。示例见phpied.com/the-new-game-show-will-it-reflow（注意display:none 的奇怪之处）

请注意，虽然绝对定位的元素不会影响其他元素的位置，但在移动或调整这些项目的大小时，布局引擎仍可能会重新运行。它只是看起来不像 - 所以要注意潜在的性能问题。

【参考方案2】：

对于绝对位置的元素，它应该不会影响文档的流动，所以它的位置变化应该不会导致页面的dom树的reflow(relayout)，但是如果你用Chrome DevTools测试this simple case，我们可以看到确实会在很短的时间内导致重新布局（整个文档）。可能渲染引擎没有把它当作特例来处理。

【讨论】：

这个错误被报告了吗？似乎绝对元素不应该触发祖先的回流。我在添加/删除绝对元素时也看到了这一点。