CSS Attributes Index Positioning Properties
Sets or retrieves the position of the object relative to the top of the next positioned object in the document hierarchy.
CSS |
{ top: 'auto' | length | percentage } |
Script |
object.style.top = sTop ] |
auto |
Default position according to the regular 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.
This property is used with the position attribute. This 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 an element’s absolute or relative top position.
<div style="position:relative; top:0px; left:150px">
<img src="../shared/images/pluto.gif"
height=100 width=192 border=0 alt="Pluto">
</div>
<br>
<div style="position:relative; top:0px; left:0px">
<img src="../shared/images/earth.gif"
height=100 width=100 border=0 alt="Mother">
</div>
<br>
<div style="position:absolute; top:300px; left:300px">
<img src="../shared/images/saturn.gif"
height=100 width=78 border=0 alt="Saturn">
</div>
Show me
The sample below uses inline event handlers to dynamically change an object’s top property in response to mouse events.
<img src="../shared/images/samp14.jpg"
height=125 width=125 border=0 alt=""
style="position:relative; top:0px"
onclick="this.style.top='-100px'"
ondblclick="this.style.top='0px'">
Show me
pixelTop, posTop