Skip to main content

Visit Mozilla.org

CSS:top

From MDC

« CSS Reference

[edit] Summary

The top property specifies part of the position of positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

[edit] Syntax 

   top: <length> | <percentage> | auto | inherit

[edit] Examples 

 /* The body could be set using px unit also for the div to operate */
 body{
   width: 100%;
   height: 100%;
 }
 /* The div can now operate the settings with % unit (body w and h are set) */
 div{
   position:absolute;
   left:15%;
   top:30%;
   bottom:30%;
   width:70%;
   height:40%;
   text-align:left;
   border: 3px rgb(0,0,0) solid;
 }

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
     <meta http-equiv="Content-Type" content="application/xhtml+xml" />
     <title>Mozzila.org height top left width percentage CSS</title>
     <style type="text/css">
       /* The body could be set using px unit also for the div to operate */
       body{
         width: 100%;
         height: 100%;
       }
       /* The div can now operate the settings with % unit (body w and h are set) */
       div{
         position:absolute;
         left:15%;
         top:30%;
         bottom:30%;
         width:70%;
         height:40%;
         text-align:left;
         border: 3px rgb(0,0,0) solid;
       }
     </style>
   </head>
   <body>
      <center>
        <div>
             ...Some content...
        </div>
      </center>

   </body>
 </html>

[edit] Notes

top is the more relevant property than bottom because the browser window default is to valign to the top. With some position property settings the top property is irrelevant. Top and bottom settings can be used by DHTML for more than simply the div element.

[edit] Specifications

[edit] Browser compatibility

Browser Lowest Version
Internet Explorer ?
Firefox 1
Netscape ?
Opera ?
Safari ?

[edit] See also

position, right, bottom, left

Retrieved from "http://developer.mozilla.org/en/docs/CSS:top"