CSS 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. position: fixed positions an element relative to the viewport. It takes the element out of the normal flow and remains fixed, not affected by scrolling.

Syntax

bottom: <value>;

Copy to clipboard
Copy to clipboard

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

Copy to clipboard
Copy to clipboard

The blue box position: absolute is positioned 40px from the bottom edge of its containing element position: relative.

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

Copy to clipboard
Copy to clipboard

The blue box position: relative is positioned 40px above its default position, represented by the dashed box within the containing element position: relative.

Example 3

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

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

Copy to clipboard
Copy to clipboard

The blue box position: fixed is taken out of the normal document flow and its position with the bottom property sets its distance 40px above the bottom edge of the viewport. It doesn’t move when the page is scrolled.