CSS Positioning Tutorial for Beginners

How can we position our elements in CSS and how do the different values for the position property work?

----------

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[rickfearn]

Two years and three months old - and still the clearest video to explain positioning. Outstanding!

[Violinistkinja]

As someone with prior knowledge of positioning, I feel like this is a good video for people with (at least basic) understanding of these concepts, but not such a clear explanation for beginners.

[navidmohammadzadeh]

I've learned four main points from this video:
- Absolute position is when an element has a position with respect to a reference value which this also defines by the container where this element placed in.
- Relative position is something that although the position of an element changes according to its reference, the initial placeholder of the element does not move. This leads the order of other elements does not change with respect to the initial status while in the case of absolute positioning by changing the position of an element, the order of the other elements changed.
- The fixed position is useful when we like to have a navigation bar stick on our webpage and does move up and down with scrolling the web.
- The last but not the least is regarding the z-index where the order of elements with respect to z-axis defines for the webpage.
Thank you to teach me these four points.

[PawanKumar-tuti]

Amazing man, even the top guys from YouTube failed to explain it better!

[sanderdestoop]

This was an amazing tutorial! I always struggled with absolute and relative positioning. This really explained it well!

[PaulCade]

Just what I needed, I was struggling to understand those 3 and where they should be used.

[briant]

thanks for this tutorial i have watch so many position css tutorials and yours is the best

[manishpandey]

You explained it as if I am a child.... your method of teaching by actually showing pictures is very good, this is what made me understand... I saw many videos, but everyone just went through webpages, and thus I got more confused. Thank you.

[larissacooper]

Thank you. This made it clearer for me with regard to your comments about he relative positioning, containing element, viewport etc.

[centori]

How come no one else explains it like that? This channel is the best!

[javinpaoli]

Thank you so much for making this video!! I tried learning the concept off of other tutoring sites but it just didn't make sense what so ever. Watching you explain it the way that you did finally made it click in my brain. Saving this video for future reference.

Again, thank you!

[vanman]

After all the time I've spent with css. Position was the one thing that always eluded me. Even after I learned flex and grid.

[tofaelahmedbhuyan]

Best explanation I have ever had. Thank you.

[lightning]

Watched it twice and seemed a bit clearer. Ty

[gingerplz]

You are amazing! This has helped me so much.

[Traoin]

usualy after seeing any video if i dont understand i go to different video but after seeing this video there is no need to do that. its simple and straight to point. thank you so much:)

[andrewwachira]

I am really grateful Academind, I am no longer confused! Blessings!

[accelerator]

Such am amazing tutorial. Answering the question that come to mind when you are a beginner:

[niket]

I found a great video. You don't know how badly i was confused in all these positions. Now I get it. Thank You Very Much....💗💗💗💗💗

[MauriceWilliams]

Great tutorial my guy it was totally wicked!