In this section, we will learn what the bottom property is and how to use it in CSS.

CSS bottom Property Definition and Usage

When working with the CSS position property and using values other than “static” for this property, in order to control the position of the target element, we use `bottom`, `left`, `right`, `top` properties.

In this section, we will learn what the bottom property is and in later sections you’ll see the other mentioned properties as well.

If the position property is set to “fixed”: the bottom property is used to set the bottom distance of the element from the bottom edge of the viewport.

If the position property is set to “absolute”: the bottom property is used to set the bottom distance of the target element from the bottom edge of its closest ancestor that is not positioned “static”.

If the position property is set to “relative”: the bottom property is used to set the bottom distance of the target element from its original position.

If the position property is set to “sticky”: The bottom property is used to set the bottom offset (on what distance from the viewport bottom side) the target element should become fixed.

If the position property is set to “static”: the bottom property has no effect.

CSS bottom Property Syntax

bottom: auto|length|initial|inherit;

CSS bottom Property Value

The value of this property is a number with any supported CSS units (relative or absolute).

Also, we can use percentage values as well.

Notes:

• The default value of this property is set to “auto” and that means it’s up to browsers to calculate the bottom distance of the target element.
• The two global values, “initial” and “inherit” could also be used for this property.

Example: bottom property in CSS

See the Pen bottom property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.