Style top property

Definition and Usage

top Set or return the top position of the 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 the located element, use bottom property.

See also:

CSS Tutorial:CSS sijoittelu

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"

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 supports

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Msaada Msaada Msaada Msaada Msaada