CSS top Property

The top property specifies the vertical position of a positioned element.

Positioned elements have a position, such as absolute, sticky and others.

The effect of the top setting depends on the position value.



The inner element is positioned 40px from the top of the container.

  .relative {
    position: relative;
    width: 400px;
    height: 200px;
    background-color: paleturquoise;

  .absolute {
    position: absolute;
    top: 40px;
    left: 20px;
    width: 200px;
    height: 90px;
    background-color: teal;

<div class="relative">
  <div class="absolute">

Using top

The effect of the top setting depends on the position value:

  • fixed or absolute - the top position is measured from its containing element.
  • relative - the top is measured from its normal top position.
  • sticky - the top specifies the sticky top position relative to the viewport.
  • static - the top value has no effect.

The top property has no effect on non-positioned elements.


top: auto | length | initial | inherit;



Value Description
auto Default. The browser calculates the top position.
length Sets the top position with any valid CSS length value. Negative values are allowed.
% Sets the top position in % of the containing element. Negative values are allowed
initial Sets the value to its default value.
inherit Inherits the value from its parent.

More Examples

Click the buttons to see the different top values.

  .top-relative {
    position: relative;
    width: 350px;
    height: 200px;
    background-color: firebrick;

  .top-absolute {
    position: absolute;
    top: -20px;
    left: 15px;
    width: 250px;
    height: 90px;
    background-color: orangered;
    transition: top 1s ease .2s;

<div class="top-relative">
  <div class="top-absolute"></div>

Browser support

This table shows when top support started for each browser.

1.0 Dec 2008
1.0 Nov 2004
5.5 Jul 2000
5.0 Dec 2000
1.0 Jun 2003

You may also like