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.

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

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

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

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