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

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

2688 ratings | 130672 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 (394)
Yuman Darmansyah (3 days ago)
Man this video is great for newbie like me, thanks a lot :D
Faheem Siddiqui (11 days ago)
very gud tutorial
Mdshamim Reza (13 days ago)
Wonderful brother.
LoloMoustache (17 days ago)
Thanks ! Really nice explanation !!
Bsher Rh (21 days ago)
Thank you very much
ansino test (23 days ago)
the best tutorial ive ever seen about positioning,others only speak speak speak but no example,hats off
aissaoui abder (24 days ago)
thanks very much
Srisha Pattabiraman (26 days ago)
Very clear explanation
Egg Jack Lee (28 days ago)
Hey... that's an awesome explanation..... Are you from India ??? If yes, are you from Bengal or Assam ?
Egg Jack Lee (28 days ago)
+techsith i must say you're an awesome teacher.
techsith (28 days ago)
Yes I am from india, from gujarat. :)
Jack Savage (30 days ago)
Great explanation. Thanks
Feng Mu (1 month ago)
like your logic!
Venu Madhav (1 month ago)
great job bro...I like it
Dog Label (1 month ago)
Man you're gold. Watching you for the 2nd time and just wondering how long you been in this biz?
Xyce Bedet (1 month ago)
Type what you want to say out before you make the video. There was a lot of verbal diarrhea.
Iliyas Mohammed (1 month ago)
Thankyou so much.. well explained.. keep going..
obada kassoumah (1 month ago)
this was so useful! thank you!
Lucas Talamo (2 months ago)
I had some doubts about positioning and your examples helped me better understand how the code works! Thank you!!
Natalia Doskach (2 months ago)
Thank you for your work! It was very well explained!
Luthfi A-l-V (2 months ago)
wher's sticky syntax?? i didnt find it?
Tushar Kuware (2 months ago)
I clearly understood difference between relative and fixed position because of this tutorial
Tushar Kuware (2 months ago)
+techsith 😊😊👍👍
techsith (2 months ago)
Thanks for watching Tushar!
Stephen Chmielinski (2 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 (2 months ago)
Super cool video, It cleared lots of doubts about the position property :D
Stephen Chmielinski (2 months ago)
I could not understand these position attributes until I found your video. Thank you!
techsith (2 months ago)
Thanks for watching Chimi!
OSITEC INTERNATIONAL (2 months ago)
Excellent video Bro! Saludos from Lima - Peru :D
Snehasish Ghosh (2 months ago)
Awesome
panji handoko (2 months ago)
Nice tutorial. Thanks
KirbzXXX (2 months ago)
Thank you! Just what I needed to figure this out.
praj2711 (3 months ago)
Best and simple explanation ever
lambigini87 (3 months ago)
good job, help me understand CSS position
Mary Aslanyan (3 months ago)
thank you
code 32 (3 months ago)
Thanks..you help me.
Javier Pacareu (3 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 (3 months ago)
Sir, thank you for this!
AudacityTunesE.T.C (3 months ago)
never stop what you are doing sir! thx
Brian Saturnino (3 months ago)
Good tutorial
Kuldeep Yadav (4 months ago)
How is the position of top left corner of element is computed if the element is fixed?
techsith (4 months ago)
for fixed position its all about how top, right, left, bottom is defined.
Happy Shah (4 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 (4 months ago)
5:30
qat add (4 months ago)
hey..thank man I really really love you lesson. it is helpful thats for sure. Thanks
Aaron K (4 months ago)
good vid.
TheCoracle (4 months ago)
Three guys in a line touching each other lol
Ben Mac (4 months ago)
Clear and simple tutorial, thanks
KC Craig (4 months ago)
Finally, I understand positioning. Thank you.
techsith (4 months ago)
:) I am gald it helped. Thanks for watching!
Adesola Peace (4 months ago)
Cool man . Explanation clear
Ashutosh Mane (4 months ago)
Hey, you the best! Got to know alot ...
Ahmad k hurmizyar (5 months ago)
thank you
Β_origin (5 months ago)
very nice video. How can i make elements responsive ???
Β_origin (5 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 (5 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 (5 months ago)
really awesome
Chris Mann (5 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 (5 months ago)
I realized what I have done after reading some of the comments like yours. :) I hope it provided some entertainment.
Narasimha Kamath (5 months ago)
An actual video on divs and position.
Deep Roy (5 months ago)
thank you so much
Deep Roy (5 months ago)
thank you
Raul Jaquez (5 months ago)
so basically absolute position will go to the origin of the parent and be on top of that element?
waterdamage restoration (5 months ago)
It would be better if there was 3 girls that would touch each other!!
techsith (5 months ago)
:)
Paul Crisan (5 months ago)
Thumbs up! Great explanation
James Bridge (5 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 (5 months ago)
by far the best video I've ever seen about positions. good job dude and thank you very much.
ar roman (5 months ago)
cr
La fille zen (6 months ago)
Thanks for this excellent tuto
techsith (5 months ago)
Thanks for watching! :)
niraj maharjan (6 months ago)
damn that was smooth :~)
techsith (5 months ago)
Thanks for watching Niraj :)
Devin Nunley (6 months ago)
great video
techsith (5 months ago)
Thanks for watching Devin!
Joseph Torres (6 months ago)
Amazing explanation... So its like this.. Relative- to itself Absolute- to its main parent Fixed- to the browser
Umesh Kumar (6 months ago)
For longtime struggled to understand the difference of relative and absolute.. this tutorial made it clear. Thanks a lot buddy.
Max Supra (6 months ago)
nice tut, keep going ,thanks a lot
techsith (6 months ago)
Thanks for watching!
Rohit Jadhav (6 months ago)
Simple n sensible .. .. Keep it up!
techsith (6 months ago)
Thanks for watching!
Prabhakar Mishra (6 months ago)
Really good
Natarajan R (6 months ago)
what is the editor you are using??
Adir Nafrin (6 months ago)
thank you
Gyuszy78 (6 months ago)
Great video
anthony vella (7 months ago)
Excellent video thanks
D ROPER (7 months ago)
Great job on this video. I learned a lot.
techsith (6 months ago)
Thanks for watching
Caleb Robinson (7 months ago)
Really useful tutorial! Would recommend watching it on 1.5x speed though
techsith (7 months ago)
Thanks for watching Caleb.
Ryan Wood (7 months ago)
Thank you, explained it very well.
Sreejith Unnikrishnan (7 months ago)
This is by far the best explanation of these position properties.
Nicole Tang (7 months ago)
Thank you! Now I'm much clear about css position!
techsith (7 months ago)
Thanks for watching Nicole! :)
saransh mehra (7 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 (7 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ń (7 months ago)
Very clear and useful video😀 thank you
Stefanita Alexandru (7 months ago)
Where is the common class?
yoeri van wassenhove (7 months ago)
Quality content. Good job.
Rahul Berry (7 months ago)
Nicely explained, impressed
DOC JAY (8 months ago)
INCREDIBLE ..... YOUR EXPLANATION IS SO SIMPLE BUT YET SO COMPLETE ..... YOU NEED TO TEACH THE LOUSY TEACHERS I HAVE ON HOW TO TEACH ..... LMBO 😎😉
Hogr Nawzad (8 months ago)
good
Bharat Kumar Gupta (8 months ago)
Good job brother. Keep at it
Gvs Akhil (8 months ago)
nice man
Yavor (8 months ago)
I enjoy your tutorials a lot, especially those with the interview questions. Now, if you could make a tutorial on how to get work with all this knowledge, it will become viral. :)
Sreedhar Revuri (8 months ago)
Super.
Moises Colon Ponce (8 months ago)
Thank you for explaining this. It was very helpful!
awesome (8 months ago)
it was great
arpit varshney (8 months ago)
😀😀😀😀
Noopur Kumari (9 months ago)
greatly explained!! thank u
India C (9 months ago)
This was a very clear and direct way to explain positioning....Thanks !!
Melina Leyva (9 months ago)
Wow amazing explanation, thank you! <3
techsith (9 months ago)
Thanks for watching Melina!
rohit shetty (9 months ago)
what you are addressing as root and body is called the viewport.
rohit shetty (9 months ago)
khud padhle pehle theek se. good attempt though.
Nikhil Jagtap (9 months ago)
Very nice tutorial
Alex Bor (9 months ago)
thank you. it's helpful.
Radvil Ardian (9 months ago)
Like this so much, thanks for good explanation You're one of the best shiffu ever
Gortex Wrecker (9 months ago)
thx good explanation mate
zaryab ali ahmed (9 months ago)
Great tutorial! Please make more, I love your style and how you explain everything.
Adam Saudagar (10 months ago)
you explained well but dont try to make fake accent, just use ur normal accent
techsith (9 months ago)
That video I was trying to change a bit so its a different style :)

Would you like to comment?

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