top

Definition

The top CSS property is used to set the vertical position of an element relative to its containing parent or positioned ancestor. It specifies the distance between the top edge of the element and the top edge of its containing parent or the top edge of the viewport if the element is positioned absolutely.

The top property accepts various values, including length units (such as pixels or percentages), keywords, or the auto keyword.

Here’s an example:

.box {
  position: absolute;
  top: 30px;
}

In this example, the .box class is positioned absolutely using position: absolute;. The top: 30px; rule sets the element’s top edge 30 pixels away from the top edge of its containing parent. This will move the element downward.

You can use negative values to position the element relative to the top edge of its containing parent in the opposite direction. For example:

.box {
  position: relative;
  top: -10px;
}

In this example, the .box class is positioned relatively using position: relative;. The top: -10px; rule shifts the element 10 pixels upward, creating an overlap with its preceding sibling element.

The top property is commonly used in conjunction with other positioning properties, such as position, left, and right, to precisely position elements within a layout. It allows you to control the vertical position of elements, enabling flexible and dynamic designs.