asp.net.ph

Skip Navigation Links

top Attribute | top Property

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.

Syntax


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

Possible Values


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.

Remarks

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.

Example

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 

See Also

pixelTop, posTop



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note