Does the browser's render reflow if element's position is absolute?
Asked Answered
O

2

10

If I have an element with an absolute position and I change its left and top position will reflow to its parent children? And what about its own children if they are not affected as they are also absolute positioned by left and top axis?

If I change an element's width/height but have no importance in the parent and in its children?

Omni answered 7/9, 2011 at 18:9 Comment(0)
C
22

An object with absolute position does not affect the layout of the page. The page is laid out without regard for an absolute positioned object. Moving the absolute positioned object does not cause any reflow of other objects.

Moving an object with absolute positioning will cause its child objects to move along with it. It will not reflow them, they will just move along with their parent container.

Chinook answered 7/9, 2011 at 19:5 Comment(4)
thanks! that's perfect to know. This rule is applied to IE6 and IE7+?Omni
It's applied to all browsers. It's how absolute positioning works.Chinook
Browser reflow behavior can be very surprising (especially IE) so I think the curt response is uncalled for. See phpied.com/the-new-game-show-will-it-reflow for an examples (take note of the display:none strangeness)Eclipse
It should be noted that whilst absolutely positioned elements do not affect the position of other elements, the layout engine may still be re-run when moving or resizing those items. It just doesn't look like it - so be aware of potential performance problems.Kos
K
5

For element with absolute position, it should not affect document flow, and so it's position change should not lead to reflow(relayout) of the page's dom tree, but if you test this simple case with Chrome DevTools, we can see it really causes relayout(the whole document) though in very short time. Probably the render engine didn't deal with it as a special case.

Kora answered 26/3, 2016 at 14:49 Comment(1)
Has this bug been reported? Seems like an absolute element shouldn't trigger reflow of ancestors. I've seen this when adding/removing absolute elements, too.Synthiasyntonic

© 2022 - 2024 — McMap. All rights reserved.