In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > posTop

posTop property

Browser support:

Specifies or retrieves the value of the top style property as a floating-point number that specifies the value in the current unit type of the top property.

With the bottom style property you can set or return the top position of an element with a unit designator as a string. The pixelTop property specifies or retrieves the top position as an integer, in pixels. If you want to set or retrieve the top position as a floating-point number that specifies the value in the current unit type of the top style property, use the posTop property.

The properties mentioned above can be used to access style settings. If you need the top position of a rendered element, you can use the offsetTop property and the getBoundingClientRect method.

The currentStyle.posTop property is read-only, all others are read/write.

Syntax:

object.posTop;

You can find the related objects in the Supported by objects section below.

Possible values:

Floating-point number that specifies or retrieves the top position.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the posTop property:

<head>
    <script type="text/javascript">
        function GetTopPos (elem) {
            var topStyle = elem.style.top;
            var topPx = elem.style.pixelTop;
            var topPos = elem.style.posTop;
            alert ("The top position of the button: " + topStyle +
                   "\n without unit type: " + topPos + 
                   "\n in pixels: " + topPx); 
        }
    </script>
</head>
<body>
    <button style="position:absolute; left:10%; top:40%; width:160px; height:30px;" 
            onclick="GetTopPos (this);">Get top position!</button>
</body>