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 bottom 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 bottom property and value will not effect it if there is no positioning or if it has the positioning of static. Its value is in relation to the bottom 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 bottom 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 bottom property, you can also have a left or right property for positioned elements. Instead of the bottom property, you can express the position with the top property for the distance from the top edge of the containing element.


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