HTML - DOM Style Object top Property

HTML DOM Style Object top property sets or returns the top position of a positioned element including margin, border, padding and scrollbar.

Syntax

Given below are the syntax to get or set the top property.

Set the top property

object.style.top= "auto | length | percentage | initial | inherit";

Get the top property

object.style.top;

Property Values

Value	Description
auto	It is the default value which lets the browser specify the top position.
length	It specifies the top position in length units and negative vaklues are allowed.
percentage	It specifies the top position in percentage of the height of the parent element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return value

It returns a string value which represents the top position of a positioned element

Examples of HTML DOM Style Object 'top' Property

The following examples sets top position of p and div elements.

Set top Property for p Element

The following example sets top position of p element using length and percentage value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object top Property
    </title>
    <style>
        #top {
            position: absolute;
        }
    </style>
</head>
<body>
    <p>
        Click to set the top position.
    </p>
    <button onclick="fun()">
        Set Top position
    </button>
    <button onclick="funTwo()">
        Set Top %
    </button>
    <p id="top">
        Welcome To Tutorials Point. 
    </p>
    <script>
        function fun() {
            document.getElementById("top")
                .style.top = "150px";
        }
        function funTwo() {
            document.getElementById("top")
                .style.top = "40%";
        }
    </script>
</body>
</html>

Set top Property for div Element

The following example sets top position of div element using negative length value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object top Property
    </title>
    <style>
        #top {
            position: absolute;
        }
    </style>
</head>
<body>
    <p>
        Click to set the top position.
    </p>
    <button onclick="fun()">
        Set Top position
    </button>
    <div id="top">
        <p>
            Welcome To Tutorials Point.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("top")
                .style.top = "-5px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
top	Yes 1	Yes 12	Yes 1	Yes 1	Yes 6

html_dom.htm

Print Page