bottom

Specifies the distance of an element from the bottom of its current location if the element itself has position: relative declared or from the bottom of its nearest ancestor when the ancestor has position: relative and the element has position: absolute declared.

Syntax

bottom: <value>;

where <value> can be one of the following:

  • Length value: 20px
  • Percentage value: 5%
  • Keyword value: auto, inherit

Note: If none of the ancestors have position: relative declared, the absolute positioned element will traverse the DOM until it reaches the

Example 1

Set the position of .box element 40px from the bottom of the nearest relative position ancestor or from the document if none exist.

.box {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
bottom: 40px;
}

Example 2

Set the position of .box element 40px from the elements bottom edge.

.box {
height: 100px;
width: 100px;
background-color: blue;
position: relative;
bottom: 40px;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy