Style bottom property

Definition and usage

bottom Sets or returns the bottom position of a positioned element.

Tip:A positioned element refers to an element with the position property set to: relative, absolute, or fixed.

Tip:To set or return the top position of a positioned element, use the top property.

See also:

CSS Tutorial:Posicionamento do CSS

CSS Reference Manual:bottom property

Instance

Example 1

Set the bottom position of the <button> element:

document.getElementById("myBtn").style.bottom = "100px";

Try it yourself

Example 2

Set the bottom position of the <div> element:

document.getElementById("myDiv").style.bottom = "10px";

Try it yourself

Example 3

Use negative values - Set the bottom position of the <div> element:

document.getElementById("myDiv").style.bottom = "-100px";

Try it yourself

Example 4

Returns the bottom position of the <div> element:

alert(document.getElementById("myDiv").style.bottom);

Try it yourself

Syntax

Return bottom property:

object.style.bottom

Set bottom property:

object.style.bottom = "auto|length|%|initial|inherit"

Attribute value

Value Description
auto Let the browser set the bottom position. Default.
length Defines the bottom position with a length unit. Negative values are allowed.
% Sets the bottom position with a percentage of the parent element's height.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: auto
Return value: String, representing the bottom position of the located element.
Versão do CSS: CSS2

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte