CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25
CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
► Source Code \u0026 More: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0 -> Alright guys, we've seen many things in this course.
2.825 -> Now we'll see how positioning is done in CSS.
7.7 -> And this is a very important topic.
10.904 -> So, I'll quickly hand over this playlist to you.
13.868 -> I'll quickly make a new file called tut25.html.
18.721 -> I have to add a boilerplate code of HTML.
23.93 -> With that, I'll quickly add boxes here.
28.382 -> I'm going to tell you about CSS' position property,
32.923 -> what happens due to position.
35.146 -> I'll write div.box#box*4
43.208 -> I'll get 4 boxes with class box and id box.
46.946 -> But wait a minute,
48.523 -> I'd said that an element can't have multiple ids.
53.287 -> If an element id is box, it can't be the same for others.
58.608 -> Absolutely right, that's why I'll make it 1,2,3,4.
61.7 -> I just wanted to write with the help of emmet.
64.77 -> And I've written it down.
66.881 -> I have to add style tag as this is a CSS tutorial.
70.33 -> To.box I'll add some things like
74.447 -> border 2 px solid red.
78.653 -> I'll add width as well.
83.06 -> How much? I'll add 200-300 or maybe 100.
85.639 -> I'll make it 150.
87.639 -> I'll add height too, 150px.
91.779 -> I put in width as 150, height as 150.
95 -> To have them in a line,
96.304 -> I'll have to make display inline block.
98.516 -> Buy wait a minute, let's quickly go to live.
101.876 -> We aren't going live on Instagram or Facebook
104.344 -> we are the coders who go live on VS Code.
106.344 -> We are legends who go live on VS Code
109.124 -> with the help of live server,
110.634 -> not on Instagram or Facebook.
112.188 -> Anyways, I'll give a margin here.
114.723 -> And what happened?
116.723 -> Oops, I have to write margin 2px.
123.159 -> See, there are 4 boxes with a 2px margin.
126.101 -> Let's have them in one line. How?
128.101 -> Display inline block, I told you before.
131.617 -> We can set height and width in display inline block
134.33 -> and there'll be inline property so that it's in one line.
137.467 -> See, it's in one line now.
139.044 -> So we have boxes 1, 2, 3, 4.
142.693 -> Now, let's see what position property is.
145.585 -> If I grab box 1,
150 -> and I put the position as static,
152.557 -> it's static by default so that won't make a difference.
156.986 -> But if I put in position as absolute,
161.46 -> and in fact, I'll do this in box 3, not 2.
164.886 -> In box 3, I'll put the positon as absolute.
167.867 -> Now, you'll ask me what position absolute is.
169.689 -> I'll tell you about 4 types of positions.
172.536 -> Position absolute, relative, okay.
180.799 -> And here, static.
183.936 -> What's static? It's by default. We'll write default too.
188.967 -> So static is by default,
190.744 -> then we have relative and then absolute.
196.143 -> Now what's the benefit position,
199.318 -> we'll see in this video.
200.137 -> But along with this, let's see two others,
202.137 -> fixed and sticky.
205.497 -> I'll explain what these are too.
207.319 -> I'll write CSS positions here.
211.704 -> I'm kind of giving you notes using comments.
216.089 -> In box 3, I wrote position absolute.
218.242 -> Let's see if something happened.
219.685 -> See, box 3 has disappeared.
221.685 -> What happened? 1,2,3 and then overlap.
224.198 -> I'll tell you what happened.
225.596 -> If I make it relative,
229.362 -> oops, I have to make it relative.
232.632 -> If I make it relative, it didn't disappear. Why?
236.081 -> It disappears for absolute but not for relative.
239.485 -> Let's understand this one by one.
241.106 -> Let's get to know relative first
242.839 -> because it doesn't disappear for relative.
244.237 -> Let's understand what relative is.
245.791 -> I'll take relative first and absolute later.
248.727 -> Relative means kin, no it doesn't.
253.023 -> Relative is a CSS position, I'll tell you about it.
256.405 -> If you make the position relative,
258.182 -> listen carefully, it's an important CSS topic.
261.029 -> Then you can use top, bottom, left, right properties.
264.188 -> If I make top 34 pixels,
266.434 -> then from the top, from its old position.
269.704 -> I'll write down what position relative means.
272.752 -> Relative means relative to its normal position.
277.449 -> That means it'll move relative to its normal position.
281.187 -> You made the top 34 pixels.
282.801 -> Suppose I want to move it here, I'll write left.
286.673 -> Suppose I made it left 34 pixels.
290.991 -> See, it shifted 34 pixels from its left.
294.373 -> Great, no problems here.
297.688 -> But you can see the gap in its old position.
303.098 -> So, if you want a gap in its old position,
306.334 -> then you'll use relative.
308.735 -> If you don't want a gap, you'll use absolute.
312.719 -> If I made the position absolute,
316.613 -> I'll use ctrl + D and replicate it,
320.151 -> and now I'll talk about absolute with you guys, oops.
329.506 -> Let's try it to see what happens.
331.64 -> And absolute, ctrl + S to save.
335.111 -> On using absolute, it's relative to the parent.
341.056 -> That means its parent, what is its parent?
343.591 -> Its parent is body.
344.9 -> But I'll give it a parent called container.
351.246 -> Why am I doing this?
352.421 -> I'm doing this because everything will be in container.
356.538 -> 4 boxes will be inside the container.
358.382 -> Let's give container a border too.
361.296 -> If I make it .container,
364.165 -> and I'll make it border 2px solid black.
370.31 -> I'll give it a background colour too.
372.756 -> What should it be? I'll choose a light one, khaki.
376.249 -> And see, khaki looks like this.
379.252 -> You can see that box number 3 in this,
383.436 -> has taken its position relative to its parent.
386.996 -> Some pixels from the top and some from the left.
389.865 -> How much did I say? I said 34 each.
392.645 -> If I make it 134 from the left for any crazy reason,
397.03 -> it'll move 134 pixels but remain same from the top.
399.743 -> In this way, I can move my box in a box.
404.039 -> In this way, you'll be able to move your box.
409.85 -> So, whoever got the difference between
412.105 -> absolute and relative position,
413.945 -> that person will understand CSS well.
415.945 -> Because position static is the same,
418.146 -> it gets displayed according to dom order,
420.525 -> that means our normal position.
422.904 -> In position relative it moves relative to normal position
427.735 -> and will leave a gap.
432.811 -> You'll understand from leave a gap,
434.811 -> at its normal position.
440 -> So, it'll leave a gap in its original position.
442.557 -> But if I don't want a gap,
444.557 -> then, uh, to its position.
448.362 -> Let me correct this.
450.362 -> To the position of its parent.
456.463 -> That means its first father. Who's its dad?
458.998 -> Its parent is container because it's inside it.
461.89 -> So, it'll shift according to its first direct parent.
466.475 -> So, this is our position absolute.
470.258 -> I'll keep the absolute small because it's not capital.
476.203 -> So, this was absolute and relative. I hope you got it.
484.065 -> Out of 1,2,3,4 boxes, we moved the 3rd one around.
487.937 -> If I make it static again,
490.294 -> that is, if I don't write anything,
492.762 -> so it'll be back to this.
495.119 -> Now, we've done this here.
496.852 -> Suppose I want a box on top when I scroll,
504.446 -> what will I do? I'll use sticky.
507.003 -> But if I want the box to stay fixed while scrolling,
510.697 -> or when I do anything, what will I do?
512.987 -> I'll use position fixed.
515.601 -> If I make position fixed for box 3,
521.657 -> I fixed the position and as soon as I did,
527.045 -> if I do this for browser window,
530.249 -> right 4 pixel and save it.
534.032 -> See, I saved it here,
537.102 -> did I make a mistake?
538.679 -> I've given it top and left, I'll remove that.
541.236 -> In fact, I'll comment it out.
544.35 -> I'll select these two and comment it out.
547.286 -> Because I want to give you the code.
549.152 -> I don't want you to leave without it.
552.333 -> I did ctrl + S and see, it's here.
555.915 -> Now, you can't see it
559.007 -> but I'll give my container a dangerous height.
561.832 -> I'll make my container's height 1444px and save it.
569.334 -> See, it's huge now.
570.643 -> When I scroll, the box is fixed there.
575 -> This is called position fixed.
576.376 -> I'm scrolling but my box is fixed there.
579.78 -> I could've done that below too.
583.764 -> If I make it bottom 2px, it comes down.
588.75 -> When do we use such things?
591.173 -> We use them for making things like chat.
593.396 -> Suppose I want to make box 3 into a chat.
599.274 -> Suppose I make it chat with us.
601.229 -> I can do this to transform box 3.
606.461 -> See, chat with us is written here.
609.308 -> I'll reload it.
611.598 -> When I scroll, it'll stay fixed there.
613.888 -> I know the box height is too big
616.057 -> and chat with us doesn't look good at all.
618.362 -> But if you want to fix it as a button, you can do that.
623.059 -> You can make a box like chat with us.
625.326 -> If someone clicks on it, it'll ask further questions.
629.822 -> This is done using position fixed.
632.446 -> Let's see what position sticky is.
635.137 -> What does position sticky do?
637.137 -> If someone is scrolling I want them to get stuck above
643.684 -> Then I'll make its position sticky.
645.35 -> I'll show you what I'm talking about.
648.219 -> First of all, I'll remove all of this.
650.798 -> I'll write position fixed means, that'll be better.
656.097 -> What did I tell you about fixed?
657.874 -> Positions relative to the browser window.
670 -> I'll write one thing here.
675.521 -> I wrote positions the element relative
678.165 -> to its browser window.
680.502 -> I didn't give space here, no worries.
682.948 -> I saved it, oops, I closed it.
686.464 -> Where is 25? Here it is.
688.977 -> When looking at the screen, I press the wrong key.
694.654 -> I have to fix my habit of hitting the keyboard fast.
698.727 -> The keyboard might break.
700.125 -> We've seen what fixed is, let's see what sticky is.
704.309 -> I'll write about sticky too but let's see it first.
708.181 -> If I make the position sticky for box 3,
713.569 -> and with that, if I write top 3px and save it,
718.31 -> then carefully see what happens when I scroll.
720.488 -> When I scroll, you can see it's stuck above.
725 -> It's stuck there and it makes no difference if I scroll.
727.602 -> This is helpful when you want to make a menu
730.672 -> such that even when a user scrolls down,
734.188 -> it's still stuck there.
736.322 -> This will be useful when making your own website.
741.286 -> So, I hope you understood CSS' position property.
746.562 -> Margin, padding, whatever we've learned.
748.874 -> Let's take a look at what we've learned.
750.874 -> We've done fonts, colours, borders background,
753.966 -> selectors and 10 other different things.
756.345 -> If you haven't accessed playlist, bookmark it, save it.
759.147 -> Apply all the things here.
760.88 -> I think you're in a position to make a good website.
764.24 -> I want that all of you make your own website
767.622 -> and I'll tell you the right way to design a website.
772.341 -> First of all, if you want to design a website,
776.391 -> search for website designs.
780.375 -> As soon as you search for website design, see this,
783.735 -> you'll get different types of website designs.
786.359 -> See, there are award-winning website designs too.
789.808 -> So, I'd suggest going to them, see those websites,
793.696 -> and see how they have designed it.
795.807 -> And when you'll see how they've designed it,
798.342 -> you'll get an idea of how you can design it.
802.972 -> So, I hope you liked this video.
805.418 -> See, they've embedded a video,
806.928 -> they have a good design, very simplistic.
810.176 -> So, I'd suggest going to different websites for ideas.
812.845 -> I'm not at all suggesting stealing someone's design.
816.472 -> Someone worked on it, I'm not suggesting stealing it.
820.166 -> See 10 designs and make your 11th unique one.
823.882 -> Seeing designs will give you ideas of what others do.
827.42 -> Here, you can use inspect element.
828.997 -> Use it to see what that guy has used,
832.513 -> what kind of resetting he has done.
835 -> See, they've reset CSS.
837.312 -> Browsers are so modern that we don't really need it.
841.028 -> Directly make a website.
843.251 -> You can make it clean and simple.
845 -> So, I'll only say that if you liked this video,
848.716 -> surely like this video and with that,
851.117 -> if you haven't accessed this playlist,
853.563 -> then click here and access this playlist.
855.563 -> Also, click here and save the playlist.
858.923 -> That's all for this video.
860.923 -> Thank you so much guys for watching this video
863.19 -> and I will see you next time.
865 -> [MUSIC]
Source: https://www.youtube.com/watch?v=MwGHiVl-gqk