CSS top

The CSS top property sets the top edge of an element to a specified length from the top edge of its containing element. It can be used to position elements absolutely within a parent element.

The top property can be set with various units such as pixels, percentages, ems, and more. Here is the syntax:

selector {
  top: length|percentage|auto;
}
Copy

Let's see some examples of how the top property works with fictional data:

In the example above, we have a parent <div> element with a height of 200px and a gray background. Inside this parent element, we have a child <div> element positioned absolutely with a top offset of 20px and a left offset of 20px. This child element has a red background color and a width and height of 100px.

You can also use percentages or other length units for the top property. For example:

In the example above, we have a similar setup as before, but this time the child element is positioned with a top offset of 50%. By using the CSS transform property, we can center the element both horizontally and vertically within its parent element.

Experiment with different values for the top property to see how it affects the positioning of elements on your web page.