Top Property


#1

Hello Coders!!!

I’m new to programming. So, when i was dealing with exercise of CSS related to opacity.
I found a code called “top” (Mentioned in the photograph)

Can you help me to understand what is the use of “top” property???


#2

Top property defines how much is the element positioned from the top of the document this can be changed so if position property is set to absolute then top will be counted from the document’s top, if position is set to relative then top will be counted from the parent element.
You can learn more about the position property here

Hope this helps :grinning:


#3

Thanks for your valuable reply!!!
I’m extremely grateful to you for this kind help.
I hope i might help you in the coming future !!!

:smile:


#4

top won’t work for static positioned elements:

https://jsbin.com/lorozucobi/edit?html,css,output

as you can see, nothing happens. The aqua div isn’t pushed down. If you change the position to relative, you will see that the element is now moved down 100 pixels

furthermore, top and margin-top (margin-top has been covered right?) work quite different, look at this example:

https://jsbin.com/fenaniqota/edit?html,css,output

as you can see, the #first (aqua) element is pushed down, which also pushes the #second (orange) element down

however, if you change margin-top to top, you will see the #first aqua element partly disappear behind the #second orange element. This is because, when using top, the elements are rendered first, and then top is applied

sorry lolfail, but i have to correct you on this matter:

lets do any other example:

https://jsbin.com/xowefisuwe/edit?html,css,output

as you can see, i gave the #inner red element a absolute position, but it perfectly stays within the #outer lime element.

This is because absolute positioned elements are positioned relative to first non-static parent, if the absolute positioned element doesn’t have a non-static parent, then lolfails statement is true.

which again, we can prove. Go make #outer lime element static, you will see that #inner red element is positioned using the document edges.

Hope this helps


#5

Thanks Sir/Mam!

You cleared my doubt and i am extremely grateful to the help rendered by you.

I’m looking forward to help you in the near future.

Thanks/Sincere

Ayush Anand