Menu
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?
689
Resizing the browser window, using JavaScript methods involving computed styles, adding or removing elements from the DOM, and changing an element's classes are a few of the things that can trigger reflow.
Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it.
Absolute positioning is done relative to the first relatively (or absolutely) positioned parent element. In the case when there is no positioned parent element, the element that has position set to absolute will be positioned related directly to the HTML element (the page itself).
A repaint occurs when changes are made to an elements skin that changes visibly, but do not affect its layout. Examples of this include outline , visibility , background , or color . According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.
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.
112
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
