div { position: absolute; top: 50px; border: 3px solid green; }

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
• If position: relative; - the top property makes the element's top edge to move above/below its normal position.
• If position: sticky; - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
• If position: static; - the top property has no effect.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property top 1.0 5.0 1.0 1.0 6.0

CSS Syntax

top: auto|length|initial|inherit;

Property Values

Value Description Demo auto Lets the browser calculate the top edge position. This is default Demo ❯ length Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units Demo ❯ % Sets the top edge position in % of containing element. Negative values are allowed Demo ❯ initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit

The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

The effect of top depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the top property specifies the distance between the element's outer margin of top edge and the inner border of the top edge of its containing block.
• When position is set to

  top = auto [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  = [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  2, the top property specifies the distance the element's top edge is moved below its normal position.
• When position is set to

  top = auto [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  = [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  5, the top property is used to compute the sticky-constraint rectangle.
• When position is set to

  top = auto [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  = [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  8, the top property has no effect.

When both top and

body {
  background: beige;
}
div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

1 values are specified, there are three different cases:

• If position is set to absolute or fixed and

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  5 is unspecified (either

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  6 or

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  7), both the top and

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 values are respected.
• If position is set to

  top = auto [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  = [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  2 or

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  5 is constrained, the top property takes precedence and the

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 property is ignored.
• If position is set to

  top = auto [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  = [|](https://developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax

  single%5Fbar)

  5, both top and

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 values are considered. This means that a sticky element can potentially move up and down within its containing block based on the values of these two properties as long as the element's position box remains contained within its containing block.

/*  values */
top: 3px;
top: 2.4em;
/* s of the height of the containing block */
top: 10%;
/* Keyword value */
top: auto;
/* Global values */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

The size of this content is determined by the position of its edges.

9

A negative, null, or positive

The size of this content is determined by the position of its edges.

9 that represents:

• for absolutely positioned elements, the distance to the top edge of the containing block.
• for relatively positioned elements, the distance that the element is moved below its normal position. `top`1

A `top`1 of the containing block's height.

Specifies that:

• for absolutely positioned elements, the position of the element is based on the

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 property, while top`5 is treated as a height based on the content; or if

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 is also

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  ` 6, the element is positioned where it should vertically be positioned if it were a static element.
• for relatively positioned elements, the distance of the element from its normal position is based on the

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 property; or if

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  1 is also

  body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }

  6, the element is not moved vertically at all.

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a

The size of this content is determined by the position of its edges.

9, `top`1, or the

body {
  background: beige;
}
div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

6 keyword.

Initial value

body {
  background: beige;
}
div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

6Applies topositioned elementsInheritednoPercentagesrefer to the height of the containing blockComputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise,

body {
  background: beige;
}
div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

6Animation typea , or calc();

How do I move a div to the top of the page in CSS?

The position Property Setting position: absolute on an element lets you use the CSS properties top , bottom , left , and right to move the element around the page to exactly where you want it. For example, setting top: 1em move the element so its top is 1em from the top of the page.

How do I make a div stick to the top of the page?

Method 1: Using the sticky value of the position property It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.

How do you make a div appear on top in CSS?

The z-index property of CSS can be used to overlay one div over another. Add z-index value to the div element with position attributes. The z-index determine the order in which div stacks.

How do I position a div on top?

Creating an overlay effect for two