bottom

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 14, 2021Updated Mar 10, 2023
Contribute to Docs

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;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy