CSS Properties Index   Positioning Properties

---

Sets or retrieves the top position of an object.

CSS	{ top: auto | length | percentage }
Script	object.style.top = auto | length | percentage

auto	Default position according to the HTML layout of the page.
length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
percentage	Value expressed as a percentage of the parent object’s height.

The property is read/write with a default value of auto; the CSS attribute is not inherited.

The top property sets the vertical position of a positioned element.

The effect of top depends on how the element is positioned ( the value set for the position property )

• When position is set to absolute or fixed, the top property specifies the distance between the outer edge of the element’s top margin and the inner border of the containing block’s top edge.
• When position is set to relative, the top property specifies the distance the element’s top edge is moved. A positive value moves it downward. A negative value moves it upward.
• When position is set to sticky, the top property is used to compute the sticky-constraint rectangle.
• When position is set to static, the top property has no effect.

Its returned value corresponds to the offsetTop property of the object and does not include the border of the parent object.

When scripting the top property, use either the pixelTop or posTop property for numeric manipulation of a top value.

For more information about how to access the dimension and location of objects on the page through the document object model, see Measuring Element Dimension and Location.

The sample below shows how inline styles are used to set the absolute top positions of multiple elements.

<div style="position: absolute; top: 640px; left: 230px">
   <img src="/shared/images/mercury.gif" width=50px title="Mercury">
</div>

<div style="position: absolute; top: 610px; left: 300px">
   <img src="/shared/images/venus.gif" width=75px title="Venus">
</div>

 Show me 

The sample below uses inline event handlers to dynamically change an object’s top property in response to mouse events. A transition is applied to illustrate the change in position.

<img id="img" src="../shared/images/someImage.jpg"
   style="position: relative; top: 0px" 
   onclick="this.style.top='200px'" 
   ondblclick="this.style.top='0px'">

 Show me 

bottom, left, right, pixelTop, posTop