The green and red squares (slightly overlapping) are respectively:

  1. An absolute positioned element, having the "Initial Containing Block" as containing block.
  2. A fixed positioned element (its containing block is the viewport).

They are positioned using bottom and right offsets.

If the browser window is resized the two boxes moves "together" as if they had the same type of positioning (the "Initial Containing Block" and the viewport both resize).

Differences appear with scrolling: Resize the window so that the horizontal scrollbar or the vertical one or both of them appear. Then scroll. The two positioned boxed do not move together. The fixed (red) one is anchored to the viewport and so does not move with the scrolling. The absolute (green) one is anchored to the initial containing block and so moves with the scrolling, like this text content.

CSS tests home