top

Overview

The top property in sets the vertical offset from the top edge of an element's containing block. It works exclusively on elements with a position value of absolute, relative, fixed, or sticky.

When employed, top modifies the element's vertical position relative to its standard location, the nearest positioned ancestor (excluding static and non-positioned elements), or the viewport. This property is often used with other offset properties (left, right, and bottom) to arrange elements within the webpage layout.

Examples and Usage

The top property works in tandem with the position property. To understand its usage, we'll first set up a simple HTML structure and apply various position values to it - absolute, relative, and fixed.

HTML Structure

Our base HTML structure for these examples will look as follows:

<div class="webref_container">
  <div class="webref1">Div A</div>
  <div class="webref2">Div B</div>
  <div class="webref3">Div C</div>
</div>

CSS Styling

Let's apply a position of absolute to .webref2.

.webref_container {
  background: #CD3333; /* Red background */
  padding: 15px; /* Space around content */
  width: 380px; /* Container width */
  height: 50px; /* Container height */
}

.webref1, .webref2, .webref3 {
  float: left; /* Align elements to the left */
  background: #FBBF24; /* Yellow background */
  border: 2px solid #000; /* Black border */
  width: 120px; /* Width of elements */
  font-family: UI Monospace, monospace; /* Set font */
}

.webref2 {
  position: absolute; /* Remove from normal flow */
  top: 35px; /* Offset from top edge */
  left: 15px; /* Offset from left edge */
}

In this setup, .webref2 is removed from the normal flow and positioned at a distance of 35px from the top of its nearest positioned ancestor (the container). The left property is also used to set the horizontal position.

Now, let's modify .webref2's position to relative.

/* Other styles remain the same */

.webref2 {
  position: relative; /* Position relative to normal flow */
  top: 35px; /* Offset from normal position */
  left: 15px; /* Offset from normal position */
}

With position: relative, .webref2 is moved 35px down from where it would be in normal flow. Other inline elements are not affected and don't adjust their position to fill the gap left by .webref2.

Lastly, we'll change .webref2's position to fixed.

/* Other styles remain the same */

.webref2 {
  position: fixed; /* Position relative to the viewport */
  top: 35px; /* Offset from top of viewport */
  left: 15px; /* Offset from left of viewport */
}

With position: fixed, .webref2 is positioned relative to the viewport, placed 35px from the top. In a scenario where the page is scrollable, this element would remain fixed within the screen's viewport, unlike the position: absolute example which would move with the document's flow when scrolling.

On another note, it's worth mentioning position: sticky as an interesting alternative. It behaves like position: relative until a given scroll position is met in the viewport, after which it behaves like position: fixed, thus combining the behaviors of relative and fixed positioning.

Additionally, top can also accept percentage values. The percentage is calculated regarding the height of the containing block. If the height is not specified, the value computes to auto.

Values

The top property can accept the following values:

Associated Properties

• position
• inset
• inset-block
• inset-inline
• bottom
• left
• right

Tips and Tricks

• The top property has an effect only when the position value of the element is not static. Employing this property can disrupt the typical flow of the document, causing elements to overlap.

• You can use negative values for the top property, which causes the element to move upwards.

• If both top and bottom properties are specified for an element with the position set to absolute or fixed, and if the height is not specified, the browser will try to satisfy both constraints. This could lead to unexpected results as it could overstretch the element.

• While the top property changes the location of a positioned element, the margin-top property adjusts the space above the element, regardless of its positioning.

Browser Compatibility

Note: In earlier versions of Internet Explorer (before IE 7), if both top and bottom are specified, top takes precedence.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)

Useful Resources

Can I use: top

W3C CSS Positioning: Insets