Left: 32px

Top: 32px

Width: 120px

Left: 240px

Top: 32px

Width: 120px

Block Alignment: Relative Positioning of Absolute Blocks

This example is based on “Making the Absolute, Relative” at stopdesign.com. All of the blocks in dashed borders are absolutely positioned.

But their absolute position is relative to the containing block, #RelativeBlock. It is important that the containing block is “positioned”:

According to the CSS2 spec, an absolute-positioned element is positioned according to its containing block. Any element is considered “positioned” if it has a position value of relative, absolute, or fixed (anything other than static). “Static” is one of the possible values for the position property. It’s also the default value for any element if no other position is specified.