CSS top Property

Description

The top property specifies the distance from the element's top outer margin to the top edge of the content block.

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

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

Browser Support

Desktop

5	12	1	1	6	1

Tablets / Mobile

≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 2nd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu