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;
}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:
CodePen: Top: positive and negative values
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.
As mentioned earlier, top has no effect on unpositioned elements (elements with position set to static). This is how elements are positioned by default.
CodePen: Top: static
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.
CodePen: Top: relative
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.
CodePen: Top: absolute
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.
CodePen: Top: fixed
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.
CodePen: Scrolling: fixed vs. absolute
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.
CodePen: Top: sticky
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.
CodePen: Scrolling: fixed vs. sticky
bottom is another CSS 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.
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.
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:
CodePen: Document flow