From Web Education Community Group
Jump to: navigation, search


The top property specifies how far positioned box's top margin edge is.


Values <length> | <percentage> | auto | inherit
Initial value auto
Applies to positioned elements
Inherited No

Point, Note

  • For absolutely positioned elements
    This property specifies the distance between the top margin edge of the element and the top edge of its containing block.

  • For relatively positioned elements
    This property specifies the offset is with respect to the top edges of the box itself.


  • <length>
    The offset is a fixed distance from the reference edge. Negative values are allowed.

  • <percentage>
    The offset is a percentage of the containing block's height. Negative values are allowed.

  • auto

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


   background-color: #999;
   width: 300px;
   position: absolute;
   top: 25px;
   left: 50px;


  <p>This is a paragraph.</p>

Csslist2 top.png

CSS Reference

The CSS specification defines the top property in 9.3.2 Box offsets.