top / bottom / left / right

The top, bottom, left, and right properties are used with position to set the placement of an element. They only have 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 || bottom || left || right>: <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, bottom, left, and right can be any of the following:

• any of the valid lengths of CSS
• a percentage of the of the containing element’s height (for top and bottom) or width (for left and right)
• auto
• inherit

The element will will generally move away from a given side when its value is positive, and towards it when the value is negative. In the example below, a positive length for top moves the element down (away from the top) and a negative length for top will move the element up (towards the top):

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, bottom, left, or right 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

Setting opposite sides

You can set a value for each of top, bottom, left, and right on a single element. When you set values for opposite sides (top and bottom, or left and right), the result might not always be what you expect.

In most cases, bottom is ignored if top is already set, and right is ignored if left is already set. When direction is set to rtl (right to left), left is ignored instead of right. In order for each value to have an effect, the element must have a position set to absolute or fixed and height set to auto (default).

In this example, we set top, bottom, left, and right to `20px`, and expect each side of the inner box to be 20px away from the sides of the outer box:

See the Pen
Setting top, bottom, left, and right by CSS-Tricks (@css-tricks)
on CodePen.

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.