CSS Property bottom

bottom property defines the offset between the bottom edge of a positioned element and the bottom of its containing block.


Initial value auto
Inherited No.
Version CSS2
JavaScript syntax object.style.bottom="50px"
Applies to Positioned elements (position other than static).

CSS Syntax

bottom: length | percentage | auto | inherit

Property Values

The property values are listed in the following table.

Value Description
auto browser does the calculation. Default value
length Sets bottom in px, cm, etc. Negative values are allowed
% Sets bottom position in % of containing element. Negative values are allowed
inherit Inherit the bottom property from the parent element

Browser compatibility

bottom Yes Yes Yes Yes Yes


An example showing how to use bottom CSS property.

<style type="text/css">
div,p {<!--from   w ww .j a va 2s . co m-->
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;

.pos {
  position: relative;
  bottom: -20px;


    <p class="pos">Positioned</p> 

Click to view the demo