Style top attribute

Definition and usage

top Attribute to set or return the top position of the located element.

This attribute specifies the top position of the element, including padding, scrollbars, borders, and margins.

Tip:The located element is position attribute Set to:relative,absolute or fixed.

Tip:To set or return the bottom position of the located element, use bottom attribute.

See also:

CSS Tutorial:Posizionamento CSS

CSS Reference Manual:top attribute

Example

Example 1

Set the top position of the <button> element:

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

Try it yourself

Example 2

Use negative values - set the top position of the <div> element:

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

Try it yourself

Example 3

Return the top position of the <div> element:

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

Try it yourself

Syntax

Return top attribute:

object.style.top

Set top attribute:

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

Attribute value

Value Description
auto Let the browser set the top position. Default.
length Define the top position with length units. Negative values are allowed.
% Set the top position with the percentage of the parent element's height.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: None
Return value: A string that represents the top position of the located element.
CSS version: CSS2

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto