Top

Set the top edge of an element relative to its normal position (relative positioning) or relative to the top edge of its container (absolute or fixed positioning)

Syntax
      top: length | percentage | auto | inherit ;

Length - A positive number will move the element up, a negative number down.
percentage - Set the bottom edge position as a percentage of the containing element. Negative values are allowed.
Auto - Let the browser calculate the bottom edge position.
inherit - inherit from the parent element.

If a top value is applied to an element with a Absolute or Fixed position, it will be placed relative to the top of the document (or non-static parent element.)
If both a top and bottom value are applied to a relatively positioned element, only the top value will be honored.

An alternative (CSS3 only) is to use transform translate() that will "nudge" the element from it's current position which is perfect for moving an item; adding motion; rather than setting its initial position.

Examples:
h1 { position: relative; top: 25px; }
.emw3class { position: absolute; top: -2em; }

#emw3id { position: relative; top: 25pt; }

Try it:

This is a sample of text with a CSS border. The border helps to display the position of the text DIV.

Browser Support: CSS 2 supported in all major browsers.

“There is no top. There are always further heights to reach” ~ Jascha Heifetz

Related:

bottom - Bottom position of a positioned element.
left - Left position of a positioned element.
right - Right position of a positioned element.
transform translate(), translateX(), translateY() - Apply a 2D or 3D transformation to an element. CSS3
position - Positioning method for an element (static, relative, absolute or fixed).


Copyright © 2013-2022 Emw3.com
Some rights reserved