top

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top

Description
This parameter defines distance from a top border of a parental element to a top border of an affiliated element not including a space, a field and width of a framework (fig. 1). Readout of coordinates depends on parameter position value. If its argument is equal absolute, in this case the parent is the browser window and an element position is defined from top border. In case of value relative, the argument top is counted from a top border of an element starting position.


Syntax

top: value | percent | auto

Arguments
Any units of length accepted in CSS are applied as values, for example pixels (px), inches (in), points (pt), etc. Value of parameter top can be negative. In this case superpositions of different elements against each other are possible. If you specify the value in percent, the element position will be calculated depending on parental element height. The argument auto does not change the element position.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>top</title>
  <style type="text/css">
   #menu { 
    position: absolute; /* Absolute positioning */
    left: 300px; /* Distance from the left edge */
    top: 50px; /* Distance from the top edge */
    width: 120px; /* Block width */
    background: #e0e0e0; /* Background color */
    border: 1px solid #000; /* Frame parameters */
    padding: 5px; /* Fields around the text */
   }
   #content { 
    position: absolute; /* Absolute positioning */
    left: 0; /* Distance from the left edge */
    top: 0; /* Distance from the top edge */
    width: 280px; /* Block width */
    background: #800000; /* Background color */
    color: white; /* Text color */
    padding: 5px; /* Fields around the text  */
    padding-right: 60px; /* Right indent */
    text-align: justify; /* Width alignment */ 
   }
  </style>
 </head>
 <body>
  <div id="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
  <div id="menu">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en 
   commodo consequat. 
  </div>
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.top
Fibre Channel vs. ISCSI
IT virtualization
Network Virtualization
Server Virtualization