Skip to main content
Home / CSS Almanac / Properties / T / top

top

The top property is used with position to set the top placement of an element. It only has an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

div {
  top: <length> || <percentage> || auto || inherit;
}

You might use it, for example, to nudge an icon into place:

button .icon {
  position: relative;
  top: 1px;
}

Or position a special element inside a container.

.container {
  position: relative;
}
.container header {
  position: absolute;
  top: 0;
}

The value for top is any of the valid lengths of CSS, a percentage of the element's height, auto, or inherit. A positive length for top will move the element down and a negative length for top will move the element up, as shown below:

See the Pen
Top: positive and negative values
by Matsuko Friedland (@missmatsuko)
on CodePen.

Position

The placement of an element with a value for top depends on its value for position. Let's take a look at what happens when we set the same value for top on elements with different values for position.

static

The top property has no effect on unpositioned elements (elements with position set to static). This is how elements are positioned by default. You could use position: static; as one method to undo the effect of top on an element.

relative

When top is set on an element with position set to relative, the element will move up or down in relation to its original placement in the document.

See the Pen
Top: relative
by Matsuko Friedland (@missmatsuko)
on CodePen.

absolute

When top is set on an element with position set to absolute, the element will move up or down in relation to its closest positioned ancestor (or the document, if there are no positioned ancestors).

In this demo, the pink box on the left is positioned 50px down from the top of the page because it has no positioned ancestor elements. The pink box on the right is positioned 50px down from the top of its parent, because the parent has a position of relative.

See the Pen
Top: absolute
by Matsuko Friedland (@missmatsuko)
on CodePen.

fixed

When top is set on an element with position set to fixed, the element will move up or down in relation to the browser's viewport.

See the Pen
Top: fixed
by CSS-Tricks (@css-tricks)
on CodePen.

At first glance, it may seem like there isn't a difference between absolute and fixed. The difference can be seen when you compare them on a page that has enough content to scroll. As you scroll down, the fixed position element is always in view, while the absolute position element scrolls away.

See the Pen
Scrolling: fixed vs. absolute
by CSS-Tricks (@css-tricks)
on CodePen.

sticky

When top is set on an element with position set to sticky, the element will move up or down in relation to the nearest ancestor with a scrolling box (or the viewport, if no ancestor has a scrolling box), limited to the bounds of its containing element.

Setting top on a sticky positioned element doesn't do much unless its container is taller than it is, and you have enough content to scroll. Like with fixed, the element will stay in view as you scroll. Unlike fixed, the element will fall out of view once it reaches the edges of its containing element.

See the Pen
Scrolling: fixed vs. sticky
by CSS-Tricks (@css-tricks)
on CodePen.

Gotchas

Using top and bottom

The bottom property is another property that affects the vertical positioning of an element. In most cases, bottom is ignored if top is already set. Elements must have a position set to absolute or fixed and height set to auto (default) or 100% for both top and bottom to have an effect.

When fixed isn't relative to the viewport

Elements with position set to fixed aren't always positioned in relation to the viewport. It will be positioned relative to its closest ancestor with a transform, perspective, or filter property set to anything other than none, if one exists.

Adding or removing space

If you've positioned an element and found that there's now an empty space or not enough space where you expected, it might have to do with whether the element is in or out of the document's flow.

When an element is taken out of the document's flow, it means that the space it originally took up on the page disappears. This is the case when an element is positioned absolute or fixed. In this example, the containing box of the absolutely positioned element has collapsed because the absolutely positioned element was removed from the document's flow:

See the Pen
Document flow
by Matsuko Friedland (@missmatsuko)
on CodePen.

Browser Support

You can take a peek, but there are no cross-browser concerns for the top property. Use at will.

icon-link icon-logo-star icon-search icon-star