CSS top Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The top CSS property specifies the vertical position of a positioned element. It has no effect on non-positioned elements. The top property can be used to position an element relative to its containing block, which is the ancestor element that establishes the element's normal position. The containing block is typically the nearest positioned ancestor, but it can also be the document body if no positioned ancestor is found.

Initial value: auto
Applies to: Positioned elements
Inherited: No
Computed value: If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
Animatable: Yes
JavaScript syntax: object.style.top

Interactive Demo

top: 0;

top: 30px;

top: 20%;

top: 5em;

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

top: auto | <length> | <percentage>

Values

<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
<percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
autoDefault position, according to the regular HTML layout of the page.

Example

HTML

<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 

<div class="menu">Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. </div>

CSS

.menu { 
   position: absolute;
   left: 300px; 
   top: 50px;
   width: 120px; 
   background: #e0e0e0;
   border: 1px solid #000;
   padding: 5px;
} 
.content {
   position: absolute;
   left: 0;
   top: 0;
   width: 280px;
   background: #00a5b6;
   color: white; 
   padding: 5px;
   padding-right: 60px; 
   text-align: justify; 
}

Result

Editor