CSS: Position and Visibility

osition: {position: normal/relative/absolute}
The position property lets you set a box's position in the layout of a page.

The default value is normal; the box's position is calculated according to other boxes. Relative lets you specify the box's position in the layout relative to its default position, so other boxes still affect its final position. Absolute lets you specify the box's precise position in the layout according to the box's containing block, so other boxes cannot affect its position.

The position property allows a Web browser to process the top and left properties. Some browsers skip the top and left properties if the boxes have the default position value. To make sure that the browser processes the top and left properties, the position value of the boxes must be set to relative.

Left: {left: XXunits/%}
The left property lets you set the distance between the element box and the left edge of the containing block.

Positive values move an element to the right and negative values move an element to the left. The default value should be 0 if the left property is not used so the element is directly aligned with the left edge of the containing block. Remember that different browsers have different default values for different elements, so it is best not to assume anything.

You can specify values for the left property in either absolute or relative units. A relative unit calculates the distance from the edge of the containing block using the width of the containing block.

Some web browsers will skip the left property if the box has the default position value. Set the position value of the box to relative to make sure that the left property is processed.

Example:

img {position: relative;
left: 3in}

If you are using a CSS-enabled browser, the Project Cool logo appears 3 inches from the left edge of the browser window.

img {position: relative;
left: 25%}

If you are using a CSS-enabled browser, the Project Cool logo appears one quarter of the way across the browser window.

Top: {top: XXunits/%}
The top property lets you set the distance between the element box and the top edge of the containing block.

Positive values move an element down and negative values move an element up. The default value should be 0 is the left property is not used so that the element is directly aligned with the top edge of the containing block. Remember that different browsers have different default values for different elements, so it is best not to assume anything and to test everything.

You can specify values for the top property in either absolute or relative units. A relative unit calculates the distance from the edge of the containing block using the height of the containing block.

Some Web browsers will skip the top property if the box has the default position value. To make sure the top property is processed, set the position value of the box to relative.

Example:

img {position: relative;
top: 100px}

If you are using a CSS-enabled browser, the Project Cool logo appears 100 pixels below the top of this browser window.

img {position: relative;
top: 50%}

If you are using a CSS-enabled browser, the Project Cool logo appears half-way down this browser window.