DEV Community

loading...
Cover image for CSS Position : Everything you need for good developer

CSS Position : Everything you need for good developer

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
・Updated on ・2 min read

CSS is very important in front-end development. CSS can make a website beautiful or horrible. CSS positions are the most important property. Position property is used to specify element's position. It's value can be

  1. Static
  2. Relative
  3. Absolute
  4. Fixed
  5. Sticky

Let's see them is more detail.

1. Static

position: static;

This is the default value for the element. The element is positioned according to the normal flow of the document. Properties like left, top, right, bottom and z-index do not affect the element having positon static.

Group 18

2. Relative

position: relative;

Element with position relative remain in the normal flow of the document. And Properties like left, top, right, bottom and z-index affect the position of the element.

Group 19

3. Absolute

position: absolute;

Elements with position: absolute are positioned relative to their parent elements.The other elements will behave as if that element is not in the document.The values of left, top, bottom and right determine the final position of the element.

Group 20

4. Fixed

position: fixed;

Position fixed is same as position absolute. The only thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen.

Untitled design

5. Sticky

position: sticky;

position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. And you have to give one of these top, left, bottom, right value to the element.

Untitled design (1)

That's it. I hope you understood each and everything. If you have any question feel free to ask me in comments.

You can also learn CSS flex box

Well if you want to learn how to make a disney+ Clone you can refer this.Disney+ clone

If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]

Thanks For reading.

Discussion (11)

Collapse
afif profile image
Temani Afif

Elements with position: absolute are positioned relative to their parent elements. --> not the parent but the first positioned ancestor and it's not necessarily the parent element.

Collapse
posandu profile image
Posandu • Edited

I think all the people read and hearted this post has given a heart to this comment :D

Collapse
violet profile image
Elena

The sticky position also requires one of the top, bottom, left, right properties, otherwise it will not work.

Collapse
kunaal438 profile image
Modern Web Author

Yes true. My bad I forgot to mention.

Collapse
mxnuel profile image
Manuel Enweremchi

This was a really helpful piece of information. Thanks.

Collapse
drfcozapata profile image
Francisco Zapata

Great!
New subscriber. Thanks!

Collapse
kunaal438 profile image
Modern Web Author • Edited

Glad to hear ☺️☺️

Collapse
darktek profile image
DarkteK

Awesome guide, thx!!

Collapse
chinmaymathurr profile image
chinmaymathurr

Didn't understood "positioned relative to parent"

Collapse
kunaal438 profile image
Modern Web Author • Edited

It means if you have a relative positioned element with top 500px for example then, if you set its child to absolute position then for that element, this 500px is equal to 0. And the top property behave like margin top.

I hope you understood now. Let me know in comments.

Collapse
kirankg333 profile image
Kirankg333

Please explain at media