HomeНаука и техникаRelated VideosMore From: techsith

css position property tutorial ( fixed, absolute, relative, static )

3016 ratings | 147193 views
CSS 'position' property explained . Learn how each fixed, absolute, relative, static value works with simple examples. 1. Static . 0:44 . (the default position, disturbing other elements) 2. relative . 2:00 . (remains in original position, but can be moved around without disturbing other elements) 3. Absolute . 7:35 . (remains in original position, but by default disturbs other elements - initially only) 4. fixed . 13:40 . (remains in original position, but by default disturbs other elements - initially only - also stays fixed on screen when scrolling up/down)
Html code for embedding videos on your blog
Text Comments (442)
Спасибо))) весьма понятное разъяснение
charles dessa (17 days ago)
nicely done man :)
peter chen (24 days ago)
very useful, thx!
Myles Gmail (26 days ago)
I posted this on facebook & tweeted it !!!!!
Lavanya K (28 days ago)
Clearly understood the concept,thank you Guruji..
Pisay Talk (30 days ago)
How about sticky?
Chandrashekhar Kunte (1 month ago)
nice explained
Gabriel Pereira Mendes (1 month ago)
Good lesson! Thanks from Brazil!
techsith (1 month ago)
Olá Gabriel. Obrigado por assistir!
Kola Aderinto (1 month ago)
Great video, but what about initial.
techsith (1 month ago)
Initial mean set the default to whatever it was .
Ashokkumar Kalavakuri (1 month ago)
Good Exaplanation sir thank you
Omar Assad (1 month ago)
I have an examen of css and html on monday, i am fkeddd
Omar Assad (1 month ago)
+techsith yeah, thanks bro
techsith (1 month ago)
Atleast you would know about position prop. Good luck. :)
Hanzala Saeed (1 month ago)
Pappi lay lo qasam seyy!!!
techsith (1 month ago)
şüheda ertürk (1 month ago)
great tutorial, easy to understand
techsith (1 month ago)
Thanks for watching suheda :)
Dime Bomb (1 month ago)
Thank you very much for taking the time to explain this!! Much appreciated! :)
TheResearcher (1 month ago)
Great explanation
Md. J. Nayem (1 month ago)
thank you so much
Naresh Yadavalli (1 month ago)
CSS 'position' property explained . exlent
Yuman Darmansyah (2 months ago)
Man this video is great for newbie like me, thanks a lot :D
Faheem Siddiqui (2 months ago)
very gud tutorial
Mdshamim Reza (2 months ago)
Wonderful brother.
LoloMoustache (2 months ago)
Thanks ! Really nice explanation !!
Bsher Rh (2 months ago)
Thank you very much
ansino test (2 months ago)
the best tutorial ive ever seen about positioning,others only speak speak speak but no example,hats off
aissaoui abder (2 months ago)
thanks very much
Srisha Pattabiraman (2 months ago)
Very clear explanation
Egg Jack Lee (2 months ago)
Hey... that's an awesome explanation..... Are you from India ??? If yes, are you from Bengal or Assam ?
Egg Jack Lee (2 months ago)
+techsith i must say you're an awesome teacher.
techsith (2 months ago)
Yes I am from india, from gujarat. :)
Jack Savage (3 months ago)
Great explanation. Thanks
Feng Mu (3 months ago)
like your logic!
Venu Madhav (3 months ago)
great job bro...I like it
Dog Label (3 months ago)
Man you're gold. Watching you for the 2nd time and just wondering how long you been in this biz?
Xyce Bedet (3 months ago)
Type what you want to say out before you make the video. There was a lot of verbal diarrhea.
Iliyas Mohammed (3 months ago)
Thankyou so much.. well explained.. keep going..
obada kassoumah (3 months ago)
this was so useful! thank you!
Lucas Talamo (4 months ago)
I had some doubts about positioning and your examples helped me better understand how the code works! Thank you!!
Natalia Doskach (4 months ago)
Thank you for your work! It was very well explained!
Luthfi A-l-V (4 months ago)
wher's sticky syntax?? i didnt find it?
Tushar Kuware (4 months ago)
I clearly understood difference between relative and fixed position because of this tutorial
Tushar Kuware (4 months ago)
+techsith 😊😊👍👍
techsith (4 months ago)
Thanks for watching Tushar!
Stephen Chmielinski (4 months ago)
The order is 1. Static . 0:44 . (the default position, disturbing other elements) 2. relative . 2:00 . (remains in original position, but can be moved around without disturbing other elements) 3. Absolute . 7:35 . (remains in original position, but by default disturbs other elements - initially only) 4. fixed . 13:40 . (remains in original position, but by default disturbs other elements - initially only - also stays fixed on screen when scrolling up/down)
David Bros (4 months ago)
Super cool video, It cleared lots of doubts about the position property :D
Stephen Chmielinski (4 months ago)
I could not understand these position attributes until I found your video. Thank you!
techsith (4 months ago)
Thanks for watching Chimi!
Excellent video Bro! Saludos from Lima - Peru :D
Snehasish Ghosh (4 months ago)
panji handoko (4 months ago)
Nice tutorial. Thanks
KirbzXXX (4 months ago)
Thank you! Just what I needed to figure this out.
praj2711 (5 months ago)
Best and simple explanation ever
lambigini87 (5 months ago)
good job, help me understand CSS position
Mary Aslanyan (5 months ago)
thank you
Thanks..you help me.
Javier Pacareu (5 months ago)
Great video, man, It would be perfect if you just add the jsfiddle link in the description. Thanks, keep it up!
Metascope Initiatives (5 months ago)
Sir, thank you for this!
AudacityTunesE.T.C (5 months ago)
never stop what you are doing sir! thx
Brian Saturnino (6 months ago)
Good tutorial
Kuldeep Yadav (6 months ago)
How is the position of top left corner of element is computed if the element is fixed?
techsith (6 months ago)
for fixed position its all about how top, right, left, bottom is defined.
Happy Shah (6 months ago)
Great Video.You explained this really good!Since I could not understand position properties in Css,so I came to this video.Thx!
Kostas (6 months ago)
qat add (6 months ago)
hey..thank man I really really love you lesson. it is helpful thats for sure. Thanks
Aaron k (6 months ago)
good vid.
TheCoracle (6 months ago)
Three guys in a line touching each other lol
Ben Mac (6 months ago)
Clear and simple tutorial, thanks
KC Craig (6 months ago)
Finally, I understand positioning. Thank you.
techsith (6 months ago)
:) I am gald it helped. Thanks for watching!
Adesola Peace (6 months ago)
Cool man . Explanation clear
Ashutosh Mane (6 months ago)
Hey, you the best! Got to know alot ...
Ahmad k hurmizyar (7 months ago)
thank you
Β_origin (7 months ago)
very nice video. How can i make elements responsive ???
Β_origin (7 months ago)
so using positioning only, you do not help your elements to be responsive ,right? The main responsive method to make your site responsive is @media query or there are more ways to achieve that?
techsith (7 months ago)
Depends, mostly your element is responsive. If you don't fix it's position and size. You ca use @media query to make responsive
Adeel Malik (7 months ago)
really awesome
Chris Mann (7 months ago)
At 5:34 I had to hold in my laughter in a silent library. I know, I'm immature. But thanks for this video. I'm in the midst if a prep course for a coding bootcamp and have fallen behind because I've focused all of my time and energy into fully comprehending this very subject. I sincerely believe I will have it down by 2021.
techsith (7 months ago)
I realized what I have done after reading some of the comments like yours. :) I hope it provided some entertainment.
Narasimha Kamath (7 months ago)
An actual video on divs and position.
Deep Roy (7 months ago)
thank you so much
Deep Roy (7 months ago)
thank you
Raul Jaquez (7 months ago)
so basically absolute position will go to the origin of the parent and be on top of that element?
waterdamage restoration (7 months ago)
It would be better if there was 3 girls that would touch each other!!
techsith (7 months ago)
Paul Crisan (7 months ago)
Thumbs up! Great explanation
James Bridge (7 months ago)
Tutorial thank you very much for making it. Really helped me understand the difference between relative and absolute position looking forward to trying it all out tomorrow!
Arman Ghaznavi (7 months ago)
by far the best video I've ever seen about positions. good job dude and thank you very much.
ar roman (8 months ago)
La fille zen (8 months ago)
Thanks for this excellent tuto
techsith (8 months ago)
Thanks for watching! :)
niraj maharjan (8 months ago)
damn that was smooth :~)
techsith (8 months ago)
Thanks for watching Niraj :)
Devin Nunley (8 months ago)
great video
techsith (8 months ago)
Thanks for watching Devin!
Joseph Torres (8 months ago)
Amazing explanation... So its like this.. Relative- to itself Absolute- to its main parent Fixed- to the browser
Umesh Kumar (8 months ago)
For longtime struggled to understand the difference of relative and absolute.. this tutorial made it clear. Thanks a lot buddy.
Max Supra (8 months ago)
nice tut, keep going ,thanks a lot
techsith (8 months ago)
Thanks for watching!
Rohit Jadhav (8 months ago)
Simple n sensible .. .. Keep it up!
techsith (8 months ago)
Thanks for watching!
Prabhakar Mishra (8 months ago)
Really good
Natarajan R (8 months ago)
what is the editor you are using??
Adir Nafrin (8 months ago)
thank you
Gyuszy78 (8 months ago)
Great video
anthony vella (9 months ago)
Excellent video thanks
D ROPER (9 months ago)
Great job on this video. I learned a lot.
techsith (9 months ago)
Thanks for watching
Caleb Robinson (9 months ago)
Really useful tutorial! Would recommend watching it on 1.5x speed though
techsith (9 months ago)
Thanks for watching Caleb.
Ryan Wood (9 months ago)
Thank you, explained it very well.
Sreejith Unnikrishnan (9 months ago)
This is by far the best explanation of these position properties.
Nicole Tang (9 months ago)
Thank you! Now I'm much clear about css position!
techsith (9 months ago)
Thanks for watching Nicole! :)
saransh mehra (9 months ago)
after making second div's position relative @4:06.. I set top 10% but it does not work however if I say left:10% it works why??
techsith (9 months ago)
relative element with a percentage top value is calculated incorrectly if its parent only has min-height set. Applying a non-percentage height to the parent, or changing top to px fixes
Adam Kwiecień (9 months ago)
Very clear and useful video😀 thank you
Stefanita Alexandru (9 months ago)
Where is the common class?
yoeri van wassenhove (10 months ago)
Quality content. Good job.
Rahul Berry (10 months ago)
Nicely explained, impressed
DOC JAY (10 months ago)
Hogr Nawzad (10 months ago)
Bharat Kumar Gupta (10 months ago)
Good job brother. Keep at it

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.