Positioning

Overview

See this MDN article on position as well as Learn CSS Layout and The Lowdown on Absolute vs. Relative Positioning.

The position property is not inherited and can be one of the following values:

static - The default value. Static elements are not positioned. They are part of the document flow and ignore the top, right, bottom and left edge-position properties.
absolute - Positions an element to the specified edge-position, relative to its closest positioned ancestor or containing block. An absolute element may overlap other elements.
relative - Same as absolute, but preserves the space in the flow it would have occupied had it not been moved (what good is that?). A relative element may overlap other elements.
fixed - Positions an element to the specified edge-position, relative to the browser's window, and doesn't move when the window is scrolled. A fixed element may overlap other elements.

Shared CSS

This section defines styles shared by multiple experiments on this page. The styles are applied to three nested divs: outermost, which contains middleGrid, which in turn contains innermost.

Outermost

MiddleGrid

Innermost

Absolute To Relative

This section experiments with positioning an absolute block within a relative block.

Innermost with Margin

Innermost is positioned 40px from the top and 40px from the left of MiddleGrid and is given a 20px margin. Since it's an absolute-positioned div inside a relative one, the results are as expected: Innermost is positioned 60px from the left and 60px from the top, with no side-effects.

MiddleGrid was not given a margin, since it's a relative div nested inside a static div. To add a margin would trigger the Vertical Margin Transfer issue.

position, margin, padding, border ./img/outermost.png, ./img/middleGrid.png, ./img/innermost.png outermost_atr10, middleGrid_atr10, innermost_atr10

Two Innermost Boxes Overlap

The first innermost div is positioned 40px from the top and left of the middle div. The second innermost div is positioned 80px from the top and left of the middle div. Both were given given a 10px margin. Since they are absolute-positioned divs inside a relative div, the results are as expected: each innermost div is positioned as specified, with no side-effects.

MiddleGrid was not given a margin, since it's a relative div nested inside a static div. Adding a margin would have triggered the Vertical Margin Transfer issue.

position, margin, padding, border ./img/outermost.png, ./img/middleGrid.png, ./img/innermost.png, ./img/innermost.png outermost_atr20, middleGrid_atr20, innermost_atr201, innermost_atr202

Relative To Absolute

This section experiments with positioning a relative block within an absolute block.

Innermost and Middle with Margins

MiddleGrid was not given a margin, since it's a relative div nested inside a static div. To add a margin would trigger the Vertical Margin Transfer issue.

position, margin, padding, border ./img/outermost.png, ./img/middleGrid.png, ./img/innermost.png outermost_rta10, middleGrid_rta10, innermost_rta10

Two Innermost Boxes Overlap

In this experiment, two relative innermost divs are nested within the absolute middle div. Managing the positions of the innermost divs can be cumbersome, because of the way the space occupied by the relative div is preserved.

position, margin, padding, border ./img/outermost.png, ./img/middleGrid.png, ./img/innermost.png, ./img/innermost.png outermost_rta20, middleGrid_rta20, innermost_rta201, innermost_rta202

Absolute To Absolute

This section experiments with positioning an absolute block within an absolute block.

Innermost and Middle with Margins

Innermost is positioned 40px from the top and 40px from the left of MiddleGrid and is given a 20px margin. Since it's an absolute-positioned div inside an absolute one, the results are as expected: Innermost is positioned 60px from the left and 60px from the top, with no side-effects.

MiddleGrid was also given a margin (10px). Since it's an absolute div nested inside an absolute one, its results are as expected: a 10px margin all around, with no side-effects..

position, margin, padding, border ./img/outermost.png, ./img/middleGrid.png, ./img/innermost.png outermost_ata10, middleGrid_ata10, innermost_ata10

Two Innermost Boxes Overlap

This experiment shows that multiple absolute boxes are easy to position and adjust with margins.

position, margin, padding, border ./img/outermost.png, ./img/middleGrid.png, ./img/innermost.png, ./img/innermost.png outermost_ata20, middleGrid_ata20, innermost_ata201, innermost_ata202

Fixed Position

Fixed <div> with Static <button>

This experiment shows a fixed div with statically positioned inner elements. The outer container doesn't matter much, because the fixed inner div is hoisted out of it's parent container and displayed at the fixed position specified by its top/right/bottom/left properties.

position, margin, padding, border outermost_fp10, inner_fp10, staticBtnEx1

Fixed <div> with Relative <button>

Same as above, but now the button has been changed from static to relative and is positioned to the bottom-right corner.

position, margin, padding, border outermost_fp20, inner_fp20, relativeBtnEx1