CSS Positioning

CSS flow is mainly concerned with the flow of the parent to which a CSS container will flow. CSS positioning is mainly concerned with the container placement method of which a CSS container will be arranged. Apart from some containers with display properties of specific form or pattern, e.g. table, flex, grid; the CSS float and CSS position properties are used to specify the basic placement method of a CSS container. Therefore, the CSS display, float, and position properties are the basic method used to manipulate how CSS containers are arranged in a CSS presentation.

By the combination of the CSS display, float and position properties together with the associated positioning properties, the positioning method used to present CSS containers are inline flowing, normal discrete flowing, floating, fixed positioning, absolute position, and relative positioning. In general, inline flowing and normal discrete flowing are used in the regular CSS container flow of a CSS presentation, while floating is used to insert an irregular CSS container flow into the regular CSS container flow in CSS presentation. Unlike flowing and floating, relative positioning is used to add an extra relative positioning to the CSS container along with the CSS flow in the CSS presentation.

According to the CSS float property and CSS position property, the positioning of a CSS container can be arranged in two different mechanism, CSS static positionng mechanism and CSS relative positioning mechanism. Both CSS inline flowing and normal discrete flowing are flowing method used in CSS static positioning mechanism. Flowing is a regular container placement method in a predefined manner, while float is a general discrete container placement method that can be specified by modifying the CSS float property. Both flowing and floating containers are handled by the CSS static positioning mechanism. While fixed, absolute, and relative positioned containers are handled by the CSS relative positioning mechanism.

CSS Static Positioning Mechanism

The CSS static positioning mechanism is named static because a CSS container is always positioned according to a reference point on the virtual plane of parent container. The positioning methods used in CSS static positioning mechanism are CSS inline flowing, CSS normal discrete flowing, and CSS floating.

CSS Inline Flowing

For CSS inline flowing, an anonymous inline container is always used to wrap all inline content. For a from top to bottom and from left to right CSS presentation, the top left corner of an anonymous inline container is always placed from top to bottom and from right to left at the most top left point of the empty line area of parent container that can be placed without overlapping. All inline content, e.g. characters, inline containers, and inline-block containers, are then placed from left to right in the empty line area of virtual anonymous inline container accordingly. The typical features of a CSS flowing are

CSS inline flowing is an individual flowing of continuous line form in the parent container.
Anonymous inline container will break into two anonymous inline containers when there is an internal line break caused by internal element.
Anonymous inline container will also break into two anonymous inline containers when there is an external line break caused by external element.

Example of CSS Inline Flowing

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:280px; overflow:auto}
div>div>div {display:inline; background:cyan;outline:blue 1px solid;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;display:inline; font-size:25px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All inline characters follow the inline flowing along baseline.
<div><div><div>12345678901234567890
1234<br />567890_1234567890
1234567890-1234567890
1234567890 1234567890
6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89
6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89
<br />6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89
</div></div></div>
All inline containers follow the inline flowing along baseline.
<div><div><div><span>12345678901234567890</span>
<span>1234<br />567890_1234567890</span>
<span>1234567890-1234567890</span>
<span>1234567890 1234567890</span>
<span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
<span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
<br /><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
</div></div></div>
All inline-block containers follow the inline flowing along baseline.
<div><div><div><span style="display:inline-block">12345678901234567890</span>
<span style="display:inline-block">1234567890_1234567890</span>
<span style="display:inline-block">1234567890-1234567890</span>
<span style="display:inline-block">1234567890 1234567890</span>
<span style="display:inline-block">6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
</div></div></div>
All inline elements follow the inline flowing along baseline.
<div><div><div>12340
<span>23401</span>
<span style="display:inline-block">34012</span>
12340
<span style="display:inline-block">34012</span>
<span>23401</span>
12 340
</div></div></div>
All inline elements follow the inline flowing along baseline.
<div><div><div>
12340
<span>inline</span>
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
<span>inline</span>
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
</div></div></div>
All inline elements follow the inline flowing along baseline.
<div><div><div>
<br />12340
<br /><span>inline</span>
<br /><span style="display:inline-block">inline-block</span>
<br />12340
<br /><span style="display:inline-block">inline-block</span>
<br /><span>inline</span>
01234<br />
<span style="float:left">float</span>
<span>inline</span>
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
01234<br />
<span style="display:block">block</span>
<span>inline</span>
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
01234<br />
<span style="float:left;width:50px;height:80px">float</span>
<span>inline</span>
<span style="display:inline-block">inline-block</span>
<span style="float:left;width:80px;height:80px">float</span>
<span>inline</span>1234
<span style="display:inline-block">inline-block</span>
1<br />1 1<span style="float:left;width:50px;height:80px">float</span>
<span>inline</span>1 12 12
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
9999<br />
<span style="float:left">float</span>
<span>inline</span>
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
01234<br />
<span style="float:right;width:50px;height:80px">float</span>
<span>inline</span>
<span style="display:inline-block">inline-block</span>
<span style="float:left;width:80px;height:80px">float</span>
<span>inline</span>1234
<span style="display:inline-block">inline-block</span>
<span style="font-size:35px">1</span><br />1 1<span style="float:right;width:50px;height:80px">float</span>
<span>in-inlineinlineinline-line</span>1 12 12
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
01234<br />
<span style="display:block;width:80px;height:80px">block</span>
<span>inline</span>
<span style="display:inline-block">inline-block</span>
12340
<span style="display:inline-block">inline-block</span>
<span>inline</span>
12340
</div></div></div>
    </body>
</html>

HTML Web Page Embedded Output:

CSS Normal Discrete Flowing

For CSS normal discrete flowing, all normal discrete containers will be placed directly in the virtual plane of the parent container. For a from top to bottom and from left to right CSS presentation, the top left corner of a discrete container is always placed from top to bottom and from right to left at the most top left point of the empty line area of parent container that can be placed without overlapping. Since all normal discrete containers have a 'new line' before and a 'carriage return' after, all CSS normal discrete containers are placed from top to bottom as a new line in the empty line area of the virtual plane of parent container accordingly without causing any overlapping with other CSS inline and normal discrete flowing containers. In other words, both CSS inline flowing and CSS normal discrete flowing containers will be presented along the static CSS flow. The typical features of a CSS normal discrete flowing are

CSS normal discrete flowing is an individual flowing of discrete container form in the parent container.
The 'new line' before feature of CSS normal discrete container will cause the CSS normal discrete container to initiate an external line break to any CSS inline flowing such that the CSS normal discrete container will always be placed at the beginning of a new line.
The 'carriage return' after feature of CSS normal discrete container will cause the CSS normal discrete container to initiate an end of line to prevent any CSS container following in the same line level.

Example of CSS Normal Discrete Flowing

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:230px; overflow:auto}
div>div>div {display:inline; background:cyan;outline:blue 1px solid;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;display:block; font-size:25px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All normal discrete containers flow along the discrete flowing.
<div><div><div><span>12345678901234567890</span>
<span>1234567890_1234567890</span>
<span>1234567890-1234567890</span>
<span>1234567890 1234567890</span>
<span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
</div></div></div>
All inline content, and normal discrete containers flow along the static flowing.
<div><div><div>123490<span>block</span>123490
<span style="display:inline">inline</span><span>block</span><span style="display:inline">inline</span>
<span style="display:inline-block">inline block</span><span>block-block</span><span style="display:inline-block">inline-block</span>
<span style="display:inline-block">inline-block</span><span>block</span><span>block block</span><span style="display:inline-block">inline-block</span>
<span style="display:inline-block">inline-block</span><span>block</span><span style="display:inline-block">inline-block</span>
</div></div></div>
    </body>
</html>

HTML Web Page Embedded Output:

CSS Floating

CSS floating container is also an individual discrete container. Unlike CSS normal discrete flowing container, CSS floating container with CSS float property not equal to none, always ignores the 'new line' before and 'carriage return' after features, and allows additonal flow manipulation for container placement. CSS floating is also a kind of relative positioning, but a CSS floating container follows the static positioning mechanism because a CSS floating container always affect the flowing of CSS containers inside the parent container. There are two steps in the placement of CSS floating container.

A CSS floating container first placed as a general purpose discrete container in order to determine the right line to place the CSS floating container. For a from top to bottom and from left to right CSS presentation, the top left corner of a floating container is always placed from top to bottom and from right to left at the most top left point of the empty line area of parent container that can be placed without overlapping. Since all floating containers do not have a 'new line' before and a 'carriage return' after by default, all CSS floating containers are placed as general purpose discrete containers along the CSS flow in the virtual plane of parent container accordingly without causing any overlapping with other CSS inline, normal discrete flowing, and floating containers.
Then the CSS floating container will float to the actual position according to the specified value.

The typical features of a CSS floating are

A floating container is always be a individual discrete container.
A floating container does not has 'new line' before and 'carriage return' after.
A floating container always floats across an anonymous inline container according to the specified float property.
For a from top to bottom and from left to right parent containe, the top left corner of a floating container is always placed from top to bottom and from left to right at the most top left point of the empty line arear of the parent container that can be placed without overlapping. And then the floating container will float according to the specified properties
A floating container acts as an additional boundary to alter the CSS flow in the parent container.

Example of CSS Floating

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:450px; overflow:auto}
div>div>div {display:inline; background:cyan;outline:blue 1px solid;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;float:left; font-size:25px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All float containers flow along the CSS static flowing.
<div><div><div>
<span>12345678901234567890</span>
<span>1234567890_1234567890</span>
<span>1234567890-1234567890</span>
<span>1234567890 1234567890</span>
<span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
<span>1234567890</span>
<span>1234567890</span>
<span>1234567890</span>
<span>1234567890</span>
<span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
</div></div></div>
All flowing and floating containers flow along the CSS static flowing.
<div><div><div>123490<span>12345678901234567890</span>123490
<i style="display:inline">123490</i><span>1234567890_1234567890</span><i style="display:inline">123490</i>
<i style="display:inline">123490</i><span>234567890-1234567890</span><i style="display:inline-block">123490</i>
<i style="display:inline">123490</i><span>1234567890 1234567890</span><i style="display:inline-block">123490</i>
<i style="display:inline-block">123490</i><span>1234567890_1234567890</span><i style="display:inline">123490</i>
<i style="display:inline-block">123490</i><span>1234567890-1234567890</span><i style="display:inline-block">123490</i>
<i style="display:inline-block">123490</i><span>1234567890 1234567890</span><i style="display:inline-block">123490</i>
<i style="display:block">123490</i><span>1234567890_1234567890</span><i style="display:inline">123490</i>
<i style="display:inline-block">123490</i><span>1234567890-1234567890</span><i style="display:block">123490</i>
<i style="display:inline-block">123490</i><span>1234567890 1234567890</span><i style="display:block">123490</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
All flowing and floating containers flow along the CSS static flowing.
<div><div><div>123490<span>01234567890123456789</span>123490
<i style="display:inline">inline1</i><span>1234</span><span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inline-block3</i><span>5678901234</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inlineblock5</i><span>6789012345 1234567890</span><i style="display:inline-block">inlineblock6</i>
1<i style="display:block">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<i style="display:block">block5</i><span>9012345678 1234567890</span><i style="display:block">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
All flowing and floating containers flow along the CSS static flowing.
<div><div><div>123490<span>01234567890123456789</span>123490
<i style="display:inline"><br />inline1</i><span>1234</span><span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline<br />1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline3<br /></i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block"><br />inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block">inline-block3<br /></i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inline-block3<br />1</i><span>5678901234</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inlineblock5</i><span>6789012345 1234567890</span><i style="display:inline-block">inlineblock6</i>
1<i style="display:block">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<i style="display:block">block5</i><span>9012345678 1234567890</span><i style="display:block">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
    </body>
</html>

HTML Web Page Embedded Output:

CSS Relative Positioning Mechanism

The CSS relative positioning mechanism is named relativec because a CSS container is always positioned with respect to a reference point on the virtual plane of parent container. CSS relative positioning mechanism is not a simple flowing mechanism as used in CSS static position mechanism, but a placing mechanism with reference to a specified reference point. The positioning methods used in CSS relative positioning mechanism are CSS fixed positioning, CSS absolute positioning, and CSS relative positioning.

CSS Fixed Positioning

CSS fixed positioning is a positioning method with respect to viewport. CSS fixed poisitioning is named fixed because the CSS container is fixed with respect to the viewpost, i.e. the CSS container always stays on the same location in the presentomg dervice when the CSS presentation is scrolled. Similart to place CSS floating container, there are also two steps in the placement of CSS fixed positioning container.

A CSS fixed positioning container first placed as a general purpose discrete container in order to determine the initial reference to place the CSS fixed position container. For a from top to bottom and from left to right CSS presentation, the top left corner of a fixed position container is always placed from top to bottom and from right to left at the most top left point of the empty line area of parent container that still have empty line space. This most top left point will be the initial relative positioning point of the associated fixed positioning container. This initial relative positioning point is not static because the point is with respect to a point of another container that may flow along the CSS static flow.
Then the CSS fixed positioning container will move to the actual position according to the specified value of associated positioning properties. The CSS relative position of fixed positioning is specified by the associated positioning properties, i.e. CSS top, left, bottom, and right properties. For a from top to bottom and from left to right CSS presentation, the values of the initial relative positioning point are used as the inital values of CSS top and left properties.

The typical features of a CSS fixed positioning are

A fixed positioning container with CSS position property equal to fixed will be placed with respect to the viewport.
For a from top to bottom and from left to right CSS presentation, the most top left point of the viewport will be the datum point. The corresponding position valve top, left, bottom, right properties are used to specify the position of the top left corner of a fix positioning container relative to the datum point.
Unlike CSS flowing and floating, a fixed positioning container is not an element of the CSS static flow.

Example of CSS Fixed Positioning

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:450px; overflow:auto}
div>div>div {display:inline; background:cyan;outline:blue 1px solid;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;float:left; font-size:25px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All fixed positioning containers are placed in the parent container and all flowing and floating containers flow along the CSS static flowing.
<div><div><div>
<i style="display:inline;position:fixed">inline<br />1</i><span>0123456789</span>123490<br />
<span style="position:fixed">0123456789</span><i style="display:inline">inline<br />1</i><br />
<i style="display:inline">inline<br />1</i><span style="position:fixed">0123456789</span>123490<br />
123490<span style="position:fixed">0123456789</span><i style="display:inline">inline<br />1</i><br />
123490<span>0123456789</span>123490
<i style="display:inline">inline1</i><span style="position:fixed">1234</span>1 1 1<span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline;position:fixed">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block;position:fixed">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block<br />4</i>
<i style="display:inline-block">inline-block<br />3</i><span>5678901234</span><i style="display:inline-block;position:fixed">inline-block4</i>
<i style="display:inline-block">inlineblock5</i>
1<i style="display:block;position:fixed">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<span>9012345678 1234567890</span><i style="display:block;position:fixed">block6</i>
<span>9012345678 1234567890</span><i style="display:block;position:fixed;top:0;Left:0">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
All flowing and floating containers flow along the CSS static flowing.
<div><div><div>
<i style="display:inline">inline<br />1</i><span>0123456789</span>123490<br />
<span>0123456789</span><i style="display:inline">inline<br />1</i><br />
<i style="display:inline">inline<br />1</i><span>0123456789</span>123490<br />
123490<span>0123456789</span><i style="display:inline">inline<br />1</i><br />
123490<span>0123456789</span>123490
<i style="display:inline">inline1</i><span>1234</span>1 1 1<span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block<br />4</i>
<i style="display:inline-block">inline-block<br />3</i><span>5678901234</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inlineblock5</i>
1<i style="display:block">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<span>9012345678 1234567890</span><i style="display:block">block6</i>
<span>9012345678 1234567890</span><i style="display:block">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
    </body>
</html>

HTML Web Page Embedded Output:

CSS Absolute Positioning

CSS absolute positioning is a positioning method with respect to a non-static parent container. CSS absolute positioning is named absolute because the CSS container stays in an absolute position with respect to a non-static parent container, i.e. the CSS container always stays on the same location in the non-static parent container absolutely. In general, a static parent container can be made non-static by specifying the CSS position property with value 'relative'. If no upper CSS non-static parent is specified, the HTML body tag will be used as the non-static parent container. Similart to place CSS fixed positioning container, there are also two steps in the placement of CSS absolute positioning container.

A CSS absolute positioning container first placed as a general purpose discrete container in order to determine the initial reference to place the CSS absolute position container. For a from top to bottom and from left to right CSS presentation, the top left corner of an absolute position container is always placed from top to bottom and from right to left at the most top left point of the empty line area of parent container that still have empty line space. This most top left point will be the initial relative positioning point of the associated absolute positioning container. This initial relative positioning point is not static because the point is with respect to a point of another container that may flow along the CSS static flow.
Then the CSS absolute positioning container will move to the actual position according to the specified value of associated positioning properties. The CSS relative position of absolute positioning is specified by the associated positioning properties, i.e. CSS top, left, bottom, and right properties. For a from top to bottom and from left to right CSS presentation, the values of the initial relative positioning point are used as the inital values of CSS top and left properties.

The typical features of a CSS absolute positioning are

An absolute positioning container with CSS position property equal to absolute will be placed with respect to an upper non-static parent container.
For a from top to bottom and from left to right CSS presentation, the most top left point of an upper non-static parent container will be the datum point. The corresponding position valve top, left, bottom, right properties are used to specify the position of the top left corner of a fix positioning container relative to the datum point.
Unlike CSS flowing and floating, an absolute positioning container is not an element of the CSS static flow.

Example of CSS Absolute Positioning

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:450px; overflow:auto}
div>div>div {display:inline; background:cyan;outline:blue 1px solid;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;float:left; font-size:25px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All absolute positioning containers are placed in the parent container and all flowing and floating containers flow along the CSS static flowing.
<div><div><div>
<i style="display:inline;position:absolute">inline<br />1</i><span>0123456789</span>123490<br />
<span style="position:absolute">0123456789</span><i style="display:inline">inline<br />1</i><br />
<i style="display:inline">inline<br />1</i><span style="position:absolute">0123456789</span>123490<br />
123490<span style="position:absolute">0123456789</span><i style="display:inline">inline<br />1</i><br />
123490<span>0123456789</span>123490
<i style="display:inline">inline1</i><span style="position:absolute">1234</span>1 1 1<span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline;position:absolute">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block;position:absolute">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block<br />4</i>
<i style="display:inline-block">inline-block<br />3</i><span>5678901234</span><i style="display:inline-block;position:absolute">inline-block4</i>
<i style="display:inline-block">inlineblock5</i>
1<i style="display:block;position:absolute">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<span>9012345678 1234567890</span><i style="display:block;position:absolute">block6</i>
<span>9012345678 1234567890</span><i style="display:block;position:absolute;top:0;Left:0">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
All flowing and floating containers flow along the CSS static flowing.
<div><div><div>
<i style="display:inline">inline<br />1</i><span>0123456789</span>123490<br />
<span>0123456789</span><i style="display:inline">inline<br />1</i><br />
<i style="display:inline">inline<br />1</i><span>0123456789</span>123490<br />
123490<span>0123456789</span><i style="display:inline">inline<br />1</i><br />
123490<span>0123456789</span>123490
<i style="display:inline">inline1</i><span>1234</span>1 1 1<span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block<br />4</i>
<i style="display:inline-block">inline-block<br />3</i><span>5678901234</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inlineblock5</i>
1<i style="display:block">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<span>9012345678 1234567890</span><i style="display:block">block6</i>
<span>9012345678 1234567890</span><i style="display:block">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
    </body>
</html>

HTML Web Page Embedded Output:

CSS Relative Positioning

CSS relative positioning is an additional positioning method with respect to its original static flowing position. CSS relative positioning is named relative because the CSS container moves in an relative position with respect to its original static floating position, i.e. the CSS container always stays on the same location in the parent container relatively. Unlike CSS floating, fixed positioning, and absolute positioning, CSS relative positioning retains the original occupied area along the CSS static flow. In other words, a CSS relative container will be placed at the same position, if the associated positioning properties, i.e. CSS top, left, bottom, and right properties, equals to zero. But like CSS fixed positioning and absolute positioning, the relative positioning container is not an element of the CSS static flow. Similart to place CSS fixed positioning container, there are also two steps in the placement of CSS relative positioning container.

A CSS relative positioning container first placed as a general purpose discrete container in order to determine the initial reference to place the CSS relative position container. For a from top to bottom and from left to right CSS presentation, the top left corner of a relative position container is always placed from top to bottom and from right to left at the most top left point of the empty line area of parent container that can be placed without overlapping. This most top left point will be the initial relative positioning point of the associated relative positioning container.
Then the CSS relative positioning container will move to the actual position according to the specified value of associated positioning properties. The CSS relative position of relative positioning is specified by the associated positioning properties, i.e. CSS top, left, bottom, and right properties. For a from top to bottom and from left to right CSS presentation, the values of the initial relative positioning point are used as the inital values of CSS top and left properties.

The typical features of a CSS relative positioning are

A relative positioning container with CSS position property equal to relative will be placed with respect to its original static position.
For a from top to bottom and from left to right CSS presentation, the most top left point of its original static position of the CSS relative positioning container will be the datum point. The corresponding position valve top, left, bottom, right properties are used to specify the position of the top left corner of a relative positioning container relative to the datum point.
Unlike CSS flowing, floating, fixed positioning, and absolute position, CSS relative positioning is a dual placement menthod, that is retaining the original occupied area along the CSS static flow and placing the relative positioning container according to the associated positioning properties as an individual container out of the CSS static flow.

Example of CSS relative Positioning

Example

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:450px; overflow:auto}
div>div>div {display:inline; background:cyan;outline:blue 1px solid;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;float:left; font-size:25px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All relative positioning containers are placed in the parent container and all flowing and floating containers flow along the CSS static flowing.
<div><div><div>
<i style="display:inline;position:relative">inline<br />1</i><span>0123456789</span>123490<br />
<span style="position:relative">0123456789</span><i style="display:inline">inline<br />1</i><br />
<i style="display:inline">inline<br />1</i><span style="position:relative">0123456789</span>123490<br />
123490<span style="position:relative">0123456789</span><i style="display:inline">inline<br />1</i><br />
123490<span>0123456789</span>123490
<i style="display:inline">inline1</i><span style="position:relative">1234</span>1 1 1<span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline;position:relative">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block;position:relative">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block<br />4</i>
<i style="display:inline-block">inline-block<br />3</i><span>5678901234</span><i style="display:inline-block;position:relative">inline-block4</i>
<i style="display:inline-block">inlineblock5</i>
1<i style="display:block;position:relative">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<span>9012345678 1234567890</span><i style="display:block;position:relative">block6</i>
<span>9012345678 1234567890</span><i style="display:block;position:relative;top:-10px;Left:-10px">block6</i>
<i style="display:inline-block;position:relative;top:-10px;Left:-10px">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
All flowing and floating containers flow along the CSS static flowing.
<div><div><div>
<i style="display:inline">inline<br />1</i><span>0123456789</span>123490<br />
<span>0123456789</span><i style="display:inline">inline<br />1</i><br />
<i style="display:inline">inline<br />1</i><span>0123456789</span>123490<br />
123490<span>0123456789</span><i style="display:inline">inline<br />1</i><br />
123490<span>0123456789</span>123490
<i style="display:inline">inline1</i><span>1234</span>1 1 1<span>7890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline1</i><span>1234567890_1234567890</span><i style="display:inline">inline2</i>
<i style="display:inline">inline3</i><span>234567890-1234567890</span><i style="display:inline">inline4</i>
<i style="display:inline">inline5</i><span>3456789012 1234567890</span><i style="display:inline">inline6</i>
<i style="display:inline-block">inline block1</i><span>4567890123_1234567890</span><i style="display:inline-block">inline block2</i>
<i style="display:inline-block">inline-block3</i><span>5678901234-1234567890</span><i style="display:inline-block">inline-block<br />4</i>
<i style="display:inline-block">inline-block<br />3</i><span>5678901234</span><i style="display:inline-block">inline-block4</i>
<i style="display:inline-block">inlineblock5</i>
1<i style="display:block">block 1</i>2<span>7890123456_1234567890</span>3<i style="display:block">block 2</i>4
<i style="display:block">block-3</i><span>8901234567-1234567890</span><i style="display:block">block-4</i>
<span>9012345678 1234567890</span><i style="display:block">block6</i>
<span>9012345678 1234567890</span><i style="display:block">block6</i>
<i style="display:inline-block">123490</i><span>6Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span><i style="display:inline-block">123490</i>
</div></div></div>
    </body>
</html>

HTML Web Page Embedded Output: