Layout

Layout, sometimes called reflow, works out the dimensions and screen position of every box: where it sits inside its containing block, how wide and tall it ends up, and how it shoves its siblings around. Constraints flow downward from parents first, then resolved sizes ripple back up as a child's content forces its parent to grow.

Triggering a layout invalidates a chunk of the render tree. This is why setting properties that don't affect geometry (like opacity or transform) is much cheaper than setting width or top, the latter forces the browser to re-measure.