value: <length> | <percentage> | auto | inherit
initial value: 0
inherited: no
percentages: refer to height of positioned containing block
applicable to: positioned elements

The CSS property of top can be used with any element, but will only take effect if the element has been positioned as relative, absolute or fixed. Giving an element a top property and value will not effect it if there is no positioning or if it has the positioning of static. Its value refers to the distance from the top edge of the containing element. The default value for a positioned element is 0 pixels from the left edge and 0 pixels from the top edge of the containing element.

The top property can be assigned a value in a fixed number of pixels, em or a percentage. The percentage will be that of the width of the containing element.

Some things to know about elements that have an absolute or fixed property is that they do not go with the normal flow of the formatting. The will sit in the same location relative to their containing element. The property of z-index will apply only for positioned elements.

Along with the top property, you can also have a left or right property for positioned elements. Instead of the top property, you can express the position with the bottom property for the distance from the bottom edge of the containing element.


div#outerbox {position: relative;}
.innerbox {position: absolute; top: 30px; left: 30px;}