CSS bottom Property

❮ Previous Reference Next ❯

Example

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
Try this code ❯





Hello World!

Meaning

The bottom CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

1: position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.

2: position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.

3: position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

4: position: static; - the bottom property has no effect.

Default value:auto
Inherited:No
Animatable:yes
Version:CSS2
JavaScript syntax:
object.style.bottom="auto|length|initial|inherit|revert|revert-layer|unset";


Standard Syntax

bottom: auto|length|initial|inherit|revert|revert-layer|unset;


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description
auto This is default. The browser calculate the bottom edge position.
length Specifies the bottom edge position in px, cm, etc. Negative values are allowed.
%(percentage) Specifies the bottom edge position in %(percentage) of containing element. Negative values are allowed.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  bottom: auto;
}
❮ Previous Reference Next ❯