CSS - top

The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.

Example

CSS

Copy Code

/* 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;
}

HTML

Copy Code

<?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>Mozilla.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>

Syntax

CSS

Copy Code

/* <length> values */
top: 3px;
top: 2.4em;

/* <percentages> of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

Values

<length>

Is a negative, null or positive <length> that represents:

for absolutely positioned elements, the distance to the top edge of the containing block;
for relatively positioned elements, the offset that the element is moved below its position in the normal flow if it wasn't positioned.

<percentage>

Is a <percentage> of the containing block's height, used as described in the summary.

auto

Is a keyword that represents:

for absolutely positioned elements, the position the element based on the bottom property and treat height: auto as a height based on the content.
for relatively positioned elements, the offset the element from its original position based on the bottom property, or if bottom is also auto, do not offset it at all.

inherit

Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <length>, <percentage> or the auto keyword.

Formal syntax

CSS

Copy Code

<a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto

Description

The top CSS property specifies part of the position of positioned elements. It has no effect on non-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.

When both top and bottom are specified, as long as height is unspecified, auto or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

Initial value	`auto`
Applies to	positioned elements
Inherited	no
Percentages	refer to the height of the containing block
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, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	the unique non-ambiguous order defined by the formal grammar

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	1.0 (1.7 or earlier)	(Yes)^[1]	(Yes)	(Yes)

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?^[1]	?	?

[1] In Internet Explorer versions before 7.0, when both top and bottom are specified, the element position is over-constrained and the top property has precedence: the computed value of bottom is set to -top, while its specified value is ignored.

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'top' in that specification.	Working Draft	Defines `top` as animatable
CSS Level 2 (Revision 1) The definition of 'top' in that specification.	Recommendation	Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/top

CSS CSS Positioning CSS Property Reference