CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25

► Source Code & Notes: codewithharry.com/videos/web-...
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutori...
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
► Source Code & More: codewithharry.com/videos/web-...
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutori...
►Learn Python In One Video - • Python Tutorial In Hin...
►Python Complete Course In Hindi - • Python Tutorials For A...
►C Language Complete Course In Hindi -
• C Language Tutorials I...
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials I...
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video...
►Django Complete Course In Hindi -
• Python Django Tutorial...
►Machine Learning Using Python - • Machine Learning Tutor...
►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
►Advanced Python Tutorials - • Intermediate/Advanced ...
►Object Oriented Programming In Python - • Object Oriented Progra...
►Python Data Science and Big Data Tutorials - • Python Data Science an...
Follow Me On Social Media
►Website (created using Flask) - www.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here

[@julurisaichandu5844]

For those who are searching for fixed and sticky difference: Fixed and sticky are both similar, but If you make a particular element inside a container as fixed, then irrespective of container height, as we scroll, the element stays at the same position till you scroll to end of web page. If you make an element as sticky and if its inside a container, then as you scroll, the element will be in the same position until the container height. While scrolling, if the container is also scrolled down, then the sticky element in the container will also move top with container. i.e., sticky will be fixed only till the end of the container, But fixed will be fixed until the end of web page.

[@anshulagarwal4445]

In sticky, I was unable to use right, left alignment of box as can be used in fixed.

[@abhisheksrivastav1706]

Good job 👍 i came to the comment box only see differences between fixed and sticky and i got it. I was 1000% sure that I'll get answer in comment box. Thanks buddy 🙂

[@Anonymous-vr1hj]

@@anshulagarwal4445 same with me bro

[@jaltadeepak416]

also, sticky occupies space in the website unlike fixed. So sticky will not cover any other element of the website like fixed. The elements will simply show after it even when you scroll while in case of fixed they will get hidden behind it.

[@abdulsamadkhan9031]

Appreciated

[@noorulain5093]

6:19 Here is the thing that i want to highlight . Since there are no other elements in this webpage therefore it seems that on adding parent div, now div 3 is positioned relative to parent div. But that is not the case. Div 3 is still positioned relative to parent body tag. Later on when we will be adding other elements in this webpage we will realise that its not positioned relative to its parent div but to its parent body. The more precise defination of absolute position is "An element with position: absolute; is positioned relative to the closest ancestor 𝐭𝐡𝐚𝐭 𝐡𝐚𝐬 𝐚 𝐩𝐨𝐬𝐢𝐭𝐢𝐨𝐧𝐞𝐝 𝐩𝐫𝐨𝐩𝐞𝐫𝐭𝐲 𝐨𝐭𝐡𝐞𝐫 𝐭𝐡𝐚𝐧 𝐬𝐭𝐚𝐭𝐢𝐜. If none of its ancestors have a positioned property (i.e., position: static;, which is the default), then it will be positioned relative to the element, or the viewport if no element is present." So if we want div 3 to be positioned relative to its parent div (absolute position) then we need to make parent div a positioned element .container { position :relative; } this position :relative; alone will not have any effect on the position of parent div (since we have not defined values of top,right,bottom or left property) but will still make parent div a positioned element.

[@utkarshpatil3180]

2:25 position property, 4:20 top/left/bottom/right, 5:00 note, 8:20 9:29 position: fixed , 11:38 sticky, 12:57 website design

[@algalg4359]

Tutorial 25th Completed and now the time to create a website in the video! Hope that everybody has created their websites! Tqsm Harry Bhaiya!

[@thrilleracaste400]

After all the research I did, I can now finally conclude that this playlist is the best playlist for the web development course. Thanks Harry bhai!❤️

[@virajgoyanka5150]

Bhai spam content isme bhi?

[@PROGRAMMER_CODER]

@@virajgoyanka5150 🤣🤣🤣🤣

[@sheetaljain4288]

When you were saying, while writing reference as notes for all the positions, "pahle dekh lete hai kya hai static ". I was getting that this is called best pedagogy. As bro you know, in India, teachers first give reference and then take tests and say to rote and write about. I am an BCA 5th semester student. In my graduation I got to know that why is Indian graduates wet behind the years even if having graduation degree. Thanks Brother what are teaching has 25000 rupees cost in market. Student like me, who don't have financial asistance, really thankful to all of you. May god fulfill your all wishes as you are making fill of other.

[@UjjwalSharma.861]

so are u know a full stack developer ?

[@Dhiman_20]

The way he said we are legends because we go live on vs code has made me feel delightful

[@developerninja5011]

i am your big fan sir....someone told me that adsense pay to only those which adds are not skiiped. thats why i watch full adds so that i can pay for what you gave us . thankyou sir @codewithharry

[@bharatmishra250]

He is a mimic artist too 😂😂😂 visit (Hindi gaming zone)

[@shauryakumar5421]

@@bharatmishra250 yes bro he is amazing

[@sakshigoyal65]

if anyone use position:absolute and you want to change its position relative to your parent element make sure u use position:relative in parent element and in child parent:absolute unless it wont work as the child element will take its position relative to body not relative to its parent

[@umarjanbhat3819]

It takes relative to html tag or may be browser window. Body is also static by default.

[@babitatiwari1745]

Thankyou sooo much🥺...I was dwelling over it for the past 3-4 days and now I get it...Harry should have explained it...😗

[@amit_pawar_9111]

Exactly, I was going to post the same thing here

[@aryan_raj_07]

I honestly love the fact that people in the comment section also try to help each other to learn and grow. Together we are not only learning but also creating a good community. ❤✨

[@adtex02]

I see how he got into IIT , he seems very hard working. The thing that most non-IITians miss is only hardwork....

[@saarza9991]

Very judgemental. Those who didn't make it into IITs are not hardworking? Maybe they are like me, who couldn't afford coaching. I studied by myself and scored 90%, missed cutoff just by .7%

[@Emotekofficial]

Well inversely I have seen people ibeing IITians but not that sharp, and People who are sharp but not IITians. A degree is a tag. Curiosity, Research and Knowledge is the weapon.

[@edward-soli]

​@saarza9991 Correctly said bro, This is the story of every average student but I am below that level 😢

[@kiddoinblack]

​@@saarza9991u need some great respect... (It that's true)

[@Ji_zooz]

​@@Emotekofficial well said but degree and skills both mattr brother:)

[@shridhar6053]

The main difference is that a "sticky" element behaves as "relative" until a specific scroll threshold is reached, after which it becomes "fixed" relative to its container. Meanwhile, a "fixed" element remains in the same position on the viewport, regardless of scrolling.. Hope that helps ❤.

[@desiguy5508]

You have an amazing way of explaining things. I read so many blogs, but couldn't understand positioning in CSS properly. When I saw your videos everything is crystal clear. Thank you so much.

[@adityakushwaha980]

best line 😂😂 "Relative means "Ristedar"😂♥

[@boyapatiramakrishna2068]

Thank you brother. I searched a lot in youtube to understand relative and absolute positions, But I couldn't understand much. But, in this video I could understand so clearly. Now I have no doubts about relative and absolute positions Thank you verymuch brother. From Hyderabad, TS.

[@arbajbhai5108]

I think all you tuber are good but for me harry sir is best because he explained in simple way because most of people are not from computer field they begginer s And other you tuber are good but they explain good but I don't understand some topic of them because they say ki ye to wese hi hojayega easy h are bhai hme nhi ata explain in step by step bhai hmara background computer se nhi tha hme thoda time lagega but Harry sir is good teacher for me !

[@shree4641]

You are the best…Hindi me dekhe huye videos humesha yaad rehte hai, Thank you Hindi me videos banane ke liye. Maine bahut books aur course bhi kiye the css par…lekin position kabhi clearly samjhme hi nhi aaya. Aapke video se aasani se samjh gai.. Thanks a lot.

[@sktamim_01]

I'm very thankful to you sir. I learned many of things from your video.Thanks for giving us so much for free. may god bless you. Sir You are great.

[@bhau1843]

2:25 position properties 3:36 position: absolute, relative 5:00 uses of relative and absolute 8:20 position:sticky

[@siddhantjaiswal4231]

There's a mistake i think- The container class has to be styled as position:relative. Only then its children will be positioned(with absolute) relative to .container class.

[@demonboy2693]

I think he missed this part. if i didnt knew about this already, i would be confused, I hope he sees this comment.

[@paramjotsingh8406]

YES!! I was wondering the same thing... @CodeWithHarry please look into this... Position absolute will position the element to the nearest parent which was previously "positioned". If no "position" is defined to any parent element before the "absolute" element (the child) will the relative to "body". top, right, bottom, left will place the absolute child element IN RELATIVE TO THE BODY.

[@umarjanbhat3819]

@@paramjotsingh8406 not to the body. Body is static as well. I checked it takes HTML tag as reference.

[@umarjanbhat3819]

Main thing in this topic to understand.

[@GULLAPUDILIKITHBCE]

really thanks have the same doubt so what you told is absolute is not based on parent element rather than relative parent element .

[@iammature7044]

Thanks sir for free such course i think learning from online and having such good teacher is the best and fastest way to learn it.

[@neerajsinghtangariya2587]

Thanks harry bhai...for this video... jo m search krna chaa rha tha wo issme easily mil gya... Thanks again..:)

[@mailtodanish]

before I use to forget difference between absolute and relative concept.. now it is quite clear..

[@Ahmad_Editz1]

I have never learned anything thanks to this man. Thank you so much harry!

[@iamaniketkr]

Superb explanation in JS, Thankyou Harry 😊♥️

[@bishalbhowmik7626]

Sir, your teaching method is very informative and easy to understand.

[@raghavgupta3168]

Thank You Harry bhai for this amazing video. This video has cleared many of my doubts related to position. But Sir, Could you please tell in a more good way that What is the difference b/w Fixed and Sticky Position.

[@AhsanRaza-tg5xg]

Thank you harry bhai love u mujhe boht faida ho ra hai apke tutorials se

[@muskansingh6948]

Your line keyboard toot jaega mere tezz maarne se meko apni ye aadat sudharni chahiye ye sun ke suddenly meko hasii aa gyi padhte padhte nyc yr your videos such a magic for us ❤️❤️❤️❤️❤️❤️

[@ASHISHKUMAR-dd9el]

awesome, started loving web development thanks harry bhai!!!!!!

[@sharayumalokar8591]

aapne abati hui chije dimag me ek baar hi me chhap jati hai. thank you............

[@dpvlogs0921]

Position absolute, relative, fixed and sticky are used for placing and making things where they supposed to be.

[@codewithrudra1964]

Thank You Harry Sir For This Web Development Tutorials.

[@mohduzair6392]

Element with position absolute is relative to the nearest positioned ancestor ( i.e. ancestor whose position is set to relative, absolute, fixed or sticky ). If there is no positioned ancestor then it will be relative to the body.

[@umarjanbhat3819]

body is also static by default

[@riyadhossain1706]

Oww, he didn't even subscribe to his own channel. Really cool.😎😎 This proves he actually want real subscribers. Much appreciated. Love from Bangladesh ❤❤❤❤

[@Husshar_Ladka]

Bro sign in nahi kiya tha Subscribe karne ke liye sign in karna padta hai...

[@aditisharma9412]

Thank you so much sir for sharing such amazing and easy understandable vidoes....:)

[@Access_adib]

It was too helpful ,Thanks to harry bhai

[@vishalkhant4448]

Watching in lockdown impressive maza aa gaya

[@jaydipmakwana9390]

wow. you have to come college as a professor.

[@rasid_khan]

harry bhai bahut hi mast video tha, akdam samaj gaye

[@rakeshraman4380]

Good day, Sir. You are great. Keep it up. God may bless you with all success in life.

[@codewithree930]

Really, your video helping a lot.

[@moviebuff3030]

Thanks for the notes. Today in this video I got that you have provided notes too.

[@sumonmondal4330]

awesome playlist brother. keep it up. more over you provide these for free for us... thanks a lot bro

[@tanmoyhazra6182]

Thank you so much aapka video Mera bahut help karti aapka video 😌😌

[@AnkitSaini-ld4hy]

Nice sir, Aap ne sikha dia sir!salute from muzaffarnagar

[@SouravKumar-ix5uz]

aapki video dekh dekh kar ek cheej aur learn ho gayi thank for watching this video and i will see you next tiiiiime

[@errishavsrivastava5190]

very helpful thanks for teaching.

[@rajkumarchavan8457]

Thanks carry, loved this video

[@ankitrawat9729]

Harry bhai html css pura ho gya avi.. Thanks alot

[@haseebuetian]

Thanks for wonderful explanation

[@hridoyjaman5134]

amazing harry vai bohot sukria

[@SureshKumar-qx6vh]

Your hindi classes more and more relatively me absolute super. Nice👌👌

[@glorysingh]

the way you say 'I will see you next time' is awesome 😊❤️

[@dhruvchoudhary7966]

sir itni achche se toh aaj tk kisi ne hi sikhaaya, you have done a great work and i admire your work, thanks a lot for these videos

[@garimabhardwaj1043]

sir, ap bhut acha smjhate ho thanx

[@sukhjindersingh-fx3kx]

Thanku very much sir ... it's very helpful video for me

[@user-ff5ry2ly6d]

thank you so much harry sir ,your great teacher.

[@engineerbhai7642]

Great tutorial. Bestcoder in you tube.

[@muhammadadil-or3kb]

great harry you are one of the best in the world

[@KomalWebdeveloper]

Thank you for clearing it❤

[@SarvShreshth-Gaming]

Thanks bro one day you will being a legend for the world ❤️🔥👍

[@pawanbajwa1113]

thanku harry. really helping a lot in learning

[@krishnagupta4847]

Very very thanks Harry bhai, mai aapni zindagi badal raha hu aapakai kirpaya sai

[@raju-qp4mz]

good job brother....u helped a lot .god bless u with lot of happiness......

[@shitalkarande2302]

Thanku so much Harry Bhai🙏🙏

[@subhammishra3433]

shandar , too good bhai

[@mohitpansari6603]

Thank you for creating such a quality content

[@Dineshtamang6267]

thank you so much for this amazing course..❤️🥰

[@vishaljagdhane762]

Thanks Sir Best Of Luck

[@saisuryamuddalapuram6252]

Baiah am following every tut and practicing and listening all ur suggestions and all and I'll prepare a web site as u said to prepare good task given ...and am sharing wd all my friends who what to learn these Web-Development ....love from Andhra bro ...keep going lots of support 😊😊👍👍

[@shahed3056]

Bro did you complete this playlist? How is your experience?? Please share

[@fleurfr]

@@shahed3056 amazing experience

[@meghashah5473]

The best tutorials so far..Thank you

[@mithilashegaji14]

Amazing speaker!

[@Tomharry910]

Thank you Harry Bro!

[@abuahmadproduction9]

ماشاءاللہ بہت خوب

[@NoName069]

Thanks, Harry Bhai😀😍

[@fatimaiqra2169]

bht acha samjhaya jazak ALLAH

[@Viralflickss]

Thankyou for making a video!

[@lifelessons5592]

Thank you for your efforts

[@mstechi3524]

Apki Typing aur Apki Keyboard chalane ki technique ko to dag Deni padegi... Super Harry Bhai..

[@rumpamondal7333]

Thanks for the video series.Just awesome. I also want to learn graphic designing. Can you please provide a full series of graphic designing?

[@thesparck_tech3687]

Thank you so much 😊

[@raavi2945]

Thanks HARRRY bhai

[@amit16_01]

Thank you 🙏 brother..

[@biswajitmahato5259]

thanks vai its helps me lot

[@techmate2890]

Amazing explanation 👏

[@amitbirajdar3613]

Sir Again I started #Day 2/100 Thak you so much

[@SyedUsmanGhani-rd7yl]

for those who not understand sticky and fixed : in short sticky is the alt for relative and fixed is the alternate for absolute

[@fatimaayaz.1578]

Thank you for this video

[@neerusabikhi1629]

thank you so much for.this video

[@NatureSycho]

Honestly Nice bro ♥️❤️❤️ love it

[@ZikreMustafaSAW]

Good tutorials, thanks

[@Vishal-nb2lx]

A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

[@anandshete9170]

W3 schools ha kamla hai babu bhiya aur kuch nhi

[@Az_Aayu]

❤

[@bhavesh2952]

So nicely explained

[@createwayniks8749]

Very well explained SIR.

[@dileshnannaware4881]

Ur tutorials are like "learn with fun"🥳

[@sagarneupane7823]

thank you code with harry thank you soo much

[@devipurnima2462]

very informative👍

[@priyanshughatiya2129]

Bhai ek no.. yrrr