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.
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 🙂
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.
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.
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.
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. ❤✨
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
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.
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 ❤.
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 !
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.
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
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 ❤️❤️❤️❤️❤️❤️
Oww, he didn't even subscribe to his own channel. Really cool.😎😎 This proves he actually want real subscribers. Much appreciated. Love from Bangladesh ❤❤❤❤
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 😊😊👍👍
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.
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.
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%
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.
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.
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.
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).
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.
Harry bhai mujhe tumhari display properties wali video samajh me nahi aayi mene kahi or se sikhli and you are telling your thought we are legends we don't go live on insta or facebook 😅😅😅😅. Nice line...
Actually need to set the position of container to relative first (dont know why only relative yet, absolute causes weirdness) for this to work properly otherwise it will use body as the positioned parent... tried it with four containers and 16 boxes total.. plz keep this comment it would be useful for my future reference... Thanks for the awsm series.. I will soon start following the new webdev series also thanks for the free lesson helps me get practice.. TY🤩
the 'fixed' position sets the position of the HTML elements according to the viewport( Screen display area ) the 'sticky' position sets the position according to the parent element
Mai final year me hu 7 semester abhi just end hua maine kabhi coding nhi kara ab bss 6 month hai aur mai promise karta hu aapka css frame work frontend and backend sab acchee se complete kar ke 20+:Lpa ka placement le lunga Yaha coding me codechef par 2 star hu par 6 month baad 5 star ho jaaunga ....I am accepting this challenge under you guidance Sir
Self Notes: relative: relative to its normal position and will leave a gap at its normal position absolute: relative to the position of its first immediate parent fixed: positions the element relative to the browser window sticky: position of the element remains fixed until the parent container is scrolled down
I want to mention a very important point for why we love to learn code by Harry bhai: His awesome vocal makes us learn code by him.. Guys, observe this if you've not already...!
Jinko absolute position me confusion hai unke liye --> Position ko absolute karne se jo baki ke elements hai wo aise behave karenge ki wo waha pe hai hi nahi,, simple hai absolute position kisi bhi element ko ghost👻 bana deta hai...ham absolute element ko kisi bhi position pe set kr sakte hai irrespective to any other elements.. Agar ham koi element kisi bhi website ke bich me dal de to baki element ki position bighad jayengi but agar absolute element bich me dal de to baki element ko kuch bhi farak nahi padega
Position absolute leaves gap whereas relative does not leave any gap. Position absolute moves elements with respect to parent element whereas, position relative moves with respect to its actual position
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.
In sticky, I was unable to use right, left alignment of box as can be used in fixed.
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 🙂
@@anshulagarwal4445 same with me bro
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.
Appreciated
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.
so are u know a full stack developer ?
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!❤️
Bhai spam content isme bhi?
@@virajgoyanka5150 🤣🤣🤣🤣
Tutorial 25th Completed and now the time to create a website in the video!
Hope that everybody has created their websites!
Tqsm Harry Bhaiya!
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.
yes you are correct
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. ❤✨
The way he said we are legends because we go live on vs code has made me feel delightful
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
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
He is a mimic artist too 😂😂😂 visit (Hindi gaming zone)
@@bharatmishra250 yes bro he is amazing
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.
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 ❤.
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 !
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.
2:25 position properties
3:36 position: absolute, relative
5:00 uses of relative and absolute
8:20 position:sticky
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
It takes relative to html tag or may be browser window. Body is also static by default.
Thankyou sooo much🥺...I was dwelling over it for the past 3-4 days and now I get it...Harry should have explained it...😗
Exactly, I was going to post the same thing here
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 ❤️❤️❤️❤️❤️❤️
Oww, he didn't even subscribe to his own channel. Really cool.😎😎
This proves he actually want real subscribers. Much appreciated.
Love from Bangladesh ❤❤❤❤
Bro sign in nahi kiya tha
Subscribe karne ke liye sign in karna padta hai...
Thanks harry Bhai (that's work for me)
position: absolute
top:039px;
Thanks!
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 😊😊👍👍
Bro did you complete this playlist? How is your experience?? Please share
@@shahed3056 amazing experience
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.
body is also static by default
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
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.
Apki Typing aur Apki Keyboard chalane ki technique ko to dag Deni padegi... Super Harry Bhai..
I love your teaching, I am now learning my passion of programing through your vids and i am 13 years old
I see how he got into IIT , he seems very hard working. The thing that most non-IITians miss is only hardwork....
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%
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.
@saarza9991
Correctly said bro,
This is the story of every average student but I am below that level 😢
@@saarza9991u need some great respect... (It that's true)
@@Emotekofficial well said but degree and skills both mattr brother:)
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.
I think he missed this part.
if i didnt knew about this already, i would be confused,
I hope he sees this comment.
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.
@@paramjotsingh8406 not to the body. Body is static as well. I checked it takes HTML tag as reference.
Main thing in this topic to understand.
really thanks have the same doubt
so what you told is absolute is not based on parent element rather than relative parent element .
Very simple, neat, clean presentation. Good work. Bohot acche se smajh aa gya. Thank you very much for this video.
aapne abati hui chije dimag me ek baar hi me chhap jati hai. thank you............
for those who not understand sticky and fixed : in short sticky is the alt for relative and fixed is the alternate for absolute
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.
Is serries ki css m relatively sabse achi video 👍❤️👌
the way you say 'I will see you next time' is awesome 😊❤️
Position absolute, relative, fixed and sticky are used for placing and making things where they supposed to be.
a very excellent and talented trainer for all the courses this the best course am learning thank you soo much sir
Thank you harry bhai love u mujhe boht faida ho ra hai apke tutorials se
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).
W3 schools ha kamla hai babu bhiya aur kuch nhi
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.
Your hindi classes more and more relatively me absolute super. Nice👌👌
Oho wowwwwwwwww best line ever hum legends hai hum vs code mein live jaate hein insta mein nai.
Sir, your teaching method is very informative and easy to understand.
Thanks Harry bro love from Pakistan
It helps me alot as a begginer😍
Harry bhai mujhe tumhari display properties wali video samajh me nahi aayi mene kahi or se sikhli and you are telling your thought we are legends we don't go live on insta or facebook 😅😅😅😅. Nice line...
Actually need to set the position of container to relative first (dont know why only relative yet, absolute causes weirdness) for this to work properly otherwise it will use body as the positioned parent... tried it with four containers and 16 boxes total..
plz keep this comment it would be useful for my future reference... Thanks for the awsm series.. I will soon start following the new webdev series also thanks for the free lesson helps me get practice.. TY🤩
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.
best line 😂😂 "Relative means "Ristedar"😂♥
I was watching Angela Yu Course and the positioning concept wasn't clearly explained their came here and understood it thanks
Sir Again I started #Day 2/100
Thak you so much
Very very thanks Harry bhai, mai aapni zindagi badal raha hu aapakai kirpaya sai
Superb explanation in JS, Thankyou Harry 😊♥️
WAY OF TEACHING OUTSTANDING 🤩🤩👍👍
Thanks bro one day you will being a legend for the world ❤️🔥👍
1:42 feasible, sir Well played 😄💙
great harry you are one of the best in the world
Best Course on Web Development.
best teacher i ever seen😍😍😍😍🥰🥰😘😘🥰🥰😘😘😘😘
Thanks harry bhai...for this video...
jo m search krna chaa rha tha wo issme easily mil gya...
Thanks again..:)
13:50 for website design information
the 'fixed' position sets the position of the HTML elements according to the viewport( Screen display area )
the 'sticky' position sets the position according to the parent element
I have never learned anything thanks to this man. Thank you so much harry!
Ur tutorials are like "learn with fun"🥳
Nice sir, Aap ne sikha dia sir!salute from muzaffarnagar
Harry bhai html css pura ho gya avi.. Thanks alot
keyboard tut jayega😆😆😆😆😆...... nice sir you are a best teacher ...... Because you give knowledge and entertain us equally,....... Thnkx for he videos
You are real legend harry bhai.🤩🤩🤩
Thank you so much aapka video Mera bahut help karti aapka video 😌😌
harry bhai bahut hi mast video tha, akdam samaj gaye
I like the way you explain everything in detail
Wali from Pakistan
The best tutorials so far..Thank you
east ho ya west harry bhai always best!
try it, set container margin: 100px box3 absolute and its top : 30px. It will set top relative to browser not it's parent that is container.
Amazingly stated my web carrier or ye boht interesting tutorials han. Thank you Harry Potter ,😁❤😂
Mahan purush hai Harry bhai❤️
Watching this Legend in 2021!
Means it still Worth a lot to Beginners
It was too helpful ,Thanks to harry bhai
Thanks for the notes. Today in this video I got that you have provided notes too.
Mai final year me hu 7 semester abhi just end hua maine kabhi coding nhi kara ab bss 6 month hai aur mai promise karta hu aapka css frame work frontend and backend sab acchee se complete kar ke 20+:Lpa ka placement le lunga Yaha coding me codechef par 2 star hu par 6 month baad 5 star ho jaaunga ....I am accepting this challenge under you guidance
Sir
4:10 relative = rishtedar = ghar k enmy
Self Notes:
relative: relative to its normal position and will leave a gap at its normal position
absolute: relative to the position of its first immediate parent
fixed: positions the element relative to the browser window
sticky: position of the element remains fixed until the parent container is scrolled down
udemy pe course liya aur ye topic dekhne ke liye yaha aaya .. 😂😂 harry bhai legend he hamare
position relative means-apni jgah pr hi reh kr move hogi.
position absolute means parent ke acording move krega or ani jgah chordegaaa.
Great tutorial. Bestcoder in you tube.
thank you so much for this amazing course..❤️🥰
Aaj harry bhaiya poore mood me lag rahe the🤣🤣🤣. Maza aaya aaj. Aise hee thoda humour daala kijiye maza aata hai😂😂😂
I want to mention a very important point for why we love to learn code by Harry bhai:
His awesome vocal makes us learn code by him..
Guys, observe this if you've not already...!
Good day, Sir. You are great. Keep it up. God may bless you with all success in life.
Thank You Harry Sir For This Web Development Tutorials.
Really, your video helping a lot.
Bhai ek no.. yrrr
Jinko absolute position me confusion hai unke liye -->
Position ko absolute karne se jo baki ke elements hai wo aise behave karenge ki wo waha pe hai hi nahi,, simple hai absolute position kisi bhi element ko ghost👻 bana deta hai...ham absolute element ko kisi bhi position pe set kr sakte hai irrespective to any other elements..
Agar ham koi element kisi bhi website ke bich me dal de to baki element ki position bighad jayengi but agar absolute element bich me dal de to baki element ko kuch bhi farak nahi padega
at 1:55 harry bhai ke recent used emojis khul gya😄😄
ye wala episode bahut khas tha mere liye sir
Position absolute leaves gap whereas relative does not leave any gap.
Position absolute moves elements with respect to parent element whereas, position relative moves with respect to its actual position
Thanks for the video series.Just awesome. I also want to learn graphic designing. Can you please provide a full series of graphic designing?
Useful Video 👍
sir, ap bhut acha smjhate ho thanx
awesome, started loving web development
thanks harry bhai!!!!!!
Thank you so much sir for sharing such amazing and easy understandable vidoes....:)
Honestly Nice bro ♥️❤️❤️ love it
sticky will be fixed only till the end of the container, But fixed will be fixed until the end of web page.