CSS top, right, bottom and left properties.
The top, right, bottom and
left properties define the placement of a positioned box within its' containing block.
When an element has a position value of relative, absolute or
fixed it is called a positioned element and it generates a positioned box. The placement of this box within its'
containing block is governed by these four properties.
Possible Values
- A length value:
- em - relative unit - the width of the 'font-size' of the font in use.
- ex - relative unit - the height of the letter 'x' in the current font.
- in - absolute unit - inches.
- mm - absolute unit - millimeters.
- cm - absolute unit - centimeters.
- pt - absolute unit - points - a point is 1/72nd of an inch.
- pc - absolute unit - picas - one pica = 12 pt.
- px - absolute unit - pixel - one pixel = 0.75 pt.
- a percentage - in relation to the width of the block that contains the box.
- auto - the browser calculates the placement of the box - the default value.
- inherit - the value is inherited from the parent element.
Code Example
div{top: 20px; left: 2em;}
For a detailed explanation of using these properties with the three different types of positioned elements please see the CSS position property page.