The top is described as the upper point. In CSS, we have the top property which we utilize for setting the top position of the element. When we set any value in this “top” property then the position of the element will be set according to the given value. It sets the value from the top of the page. It only affects the vertical position of the element. We can set the value of this top property in “px”, “em” or also “%”. When we want to set some elements from the top in the vertical direction then we use this “top” property in CSS. In this guide, we will use this “top” property in CSS and set the position of the elements. We will provide some examples in which we use this “top” property and will show you how it affects the position of the element.

Example # 1:

For applying this property, we must have some elements. So, first, we create some elements in HTML. For making an HTML file, we have to open a new file. Visual Studio Code is the software we’ll be utilizing. We’ll begin coding in this file. We also type “!” and then click “Enter” to retrieve the HTML basic tags, which are required in all HTML codes. After all this, we have to type the body in which we are going to write some paragraphs next to the heading. We are setting different names for each paragraph so we will utilize these names when we are applying the “top” property on these paragraphs. Here, we have four paragraphs with the name “p1”, “p2”, “p3”, and “p4” and we will change their top position by utilizing the top property in CSS.

First, we have type “. P1” which represents the first paragraph. We set its “position” as “absolute”. Then, we are going to set its position from the top with the help of the “top” property. In this example, we are using “%” with the value of the “top” property. We set the value of the top property of the first paragraph as “10%”. Also, sets its “color” to “red” and “16px” for the “font-size”. Now, we have the second paragraph “p2”. Its “position” is also “absolute” and we set the “top” property value of the second paragraph as “25%”. Its “color” of font is “green” and “font-size” is “18px”. Then, the third paragraph’s “position” is again “absolute” and the “top” is “40%”. The paragraph “color” is “blue” and “20px” is the “font-size”. For the “p4” paragraph, we are going to set “70%” as the “top” and “purple” font “color” and “font-size” is “22px” for this fourth paragraph.

You can see the top position of all the paragraphs is different as we have set these top positions in this example.  The first paragraph appears as “10%” from the top of the page as we have set “10%” in the “top” property. The other appears exactly in the same top position which we have set in the CSS code.

Example # 2:

In this example, we are using two div elements of different names as “b” and “c” inside another div “a”. We also have one heading before these div elements. Now, we will apply the “top” property to these div elements.

The “div. a” is the main div that we have created in the HTML and we are setting the “position” of this div as “relative”. Then, we are utilizing the “width” and “height” properties and set “400px” and “200px” for these respectively. We are creating the border for this div by using the “border” property. The above width and height property is here for setting the width and height of the div border. The “border” we are setting is “3px” in its width and the “red” in the “color” of the “solid” type. We also have “div. b” and we are going to set the “position” of this “div. b” which is present inside the first div and sets it as “absolute” and its “top” is “0”.  We are creating a border around this div by using the “border” property. This border is in the “blue” color of “3px” and “solid” type.”

After this, we are moving to our last div which is “div. c”. Again we set its “position” to “absolute” but its “top” is “100px”. In this example, we are using “px” for setting the “top” of the third div. Its border is set as “green” and the “background-color” is set here as “light green”.

You can notice that there is no space between the borders of the first div and the second div because we set the top of the second div as “0”. The third div is set as “100px” so you can see in the output how it appears. It appears at “100px” below from the top border of the first div.

Example # 3:

Here, we have one heading and then the main div container. Inside this main div, we also have three other div containers. All these div containers are of different names so we will set different top values for all div containers.

First, we mention the name of that div that we want to style. So, we put the name of the first div and then style this div using the “position” property. Then, setting its value by using the “relative” keyword. We set its “top” to “00px” and the “width” and “height” we are setting here is “400px” and “350px” respectively. We are going to set its “border” to “2px” and “solid” type in “black” color. The second div “position” we are setting here is “absolute” and the value of the “top” is “50px” and the “border” is “red” in color. The “position” of the third div is set to “absolute”. The “top” value is “150px” for the third div and the “border” color is “blue”.

Then, comes forth div and again “position” is “absolute”. “200px” top value and “green” for the “border”. All borders we are using in this code are in “solid” type and also in “2px” width.

The output shows you the top position of all the div containers. All div elements appear at a different position from the top of the first div. This is all because of the “top” property which we have used in the CSS code.

Example # 4:

We have one heading, then the main div element, and three more div elements inside the main div element. We use different names for all div elements. So, we’ll use separate top values for each of them.

We set the main div Div1’s height as “300px” and its “background-color” is “white”. Then, we are moving to the other div elements which are present inside this main div. We are setting the value of the “top” property of these divs in “em”. We set the second div “top” as “5em”. The third div “top” is “10em” and the last div “top” value is “20em”.

In this output, inside the first div, the second div element is rendered at “5em” from the “top”, the third div is rendered at “10em” from the “top”, and also the third div is rendered at “20em” from the top as we have used the “top” property here in our CSS code.

Conclusion:

This guide has explained how to use CSS’s “top” property. We have gone through what top property is, and how to set it in CSS. The “top” property is used here for setting the position of the elements from the top and we have used “px”, “em”, and “%” for setting the value of the “top” property. We have presented multiple examples in this guide and also. We have pasted all the screenshots of the codes as well as the output here. You will use this “top” property in your codes after thoroughly studying this guide.