CSS - bottom Property

CSS bottom property is used to set the bottom position of a positioned element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing element. Based on the value of the position property, the effect of bottom property, is determined.

Syntax

bottom: auto | length | percentage | initial | inherit;

Property Values

Examples of CSS Border Property

The following examples explain the bottom property with different values.

Bottom Property with Absolute Position

To use bottom property with absolute position, the element must be contained within a parent which itelf should be positioned. The element will then be placed relative to the parent. The distance from the bottom of the parent container edge can be specified in length or percentage values (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.

Example

Bottom Property with Relative Position

When the bottom property is used with relative position, the element will be placed relative to its normal position. The distance from the bottom of its normal position can be specified in length or percentage values (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.

Example

Bottom Property with Fixed Position

The fixed position places an element at a specific position, the element stays at the position despite scroll. The position of the element from the bottom can be specified in length or percentage (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.

Example

Bottom Property with Sticky Position

The sticky position keeps an element fixed relative to its container when scrolling past a specified point. With the bottom property, we can control the distance from the containers bottom edge. Values like auto, 10px, or 10% adjust its sticking behavior accordingly. This is shown in the following example.

Example

Note: The position ‘static’ is not impacted by properties top, right, bottom or left. It displays the elements in the order they appear. It is the default position for elements.

Supported Browsers