bottom

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS bottom Property

Example

Set the bottom edge of the absolute positioned <div> element to 70px above the bottom edge of its nearest positioned ancestor:

div.absolute {
    position: absolute;
    bottom: 70px;
    width: 200px;
    height: 100px;
    border: 3px solid #8AC007;

}

Definition and Usage

For absolutely positioned elements, the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.

For relatively positioned elements, the bottom property sets the bottom edge of an element to a unit above/below its normal position.

Note: If "position:static", the bottom property has no effect.

CSS Syntax

bottom: auto|length|initial|inherit;

Property Values

Value Description  
auto Lets the browser calculate the bottom edge position. This is default  
length Sets the bottom edge position in px, cm, etc. Negative values are allowed  
% Sets the bottom edge position in % of containing element. Negative values are allowed