Style top property

Definition and Usage

top Property to set or return the top position of a positioned element.

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

Tip:The positioned element is position property Set to:relative,absolute or fixed.

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

See also:

CSS Tutorial:CSS positionering

CSS Reference Manual:top property

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 property:

object.style.top

Set top property:

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

Property 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 positioned element.
CSS version: CSS2

browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support