css position property tutorial ( fixed, absolute, relative, static )
HTML-код
- Опубликовано: 1 окт 2024
- 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)
#css #position #property
*My Udemy Courses
www.udemy.com/...
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
5:29 think of this as three guys standing in a line, and they are touching each other XD
lol.
Harsh Phoujdar That was hillarious.... LMAO
then, the 2nd guy goes on top of 3rd xD
lol I thought the same thing.
you have a dirty mind! :)
Codecademy, Freecodecamp, Treehouse, major respects to these guys but you have explained it much clearer than they have. You’re examples were outstanding. I finally get it!! Thank you sir!!!
Thanks DJ for an awesome comment. :)
Amazing explanation...
So its like this..
Relative- to itself
Absolute- to its main parent
Fixed- to the browser
Thanks very much, indeed, for that simple; but, truly GREAT summary. ;-)
INCREDIBLE ..... YOUR EXPLANATION IS SO SIMPLE BUT YET SO COMPLETE ..... YOU NEED TO TEACH THE LOUSY TEACHERS I HAVE ON HOW TO TEACH ..... LMBO 😎😉
Great video, fast shipping, recommended seller A+++
XD very funny
Ur in the wrong site
For longtime struggled to understand the difference of relative and absolute.. this tutorial made it clear. Thanks a lot buddy.
very nicely described. It would be very helpful if you give a tutorial about z-index property of css
I notice some of the comments below say "awesome tutorial", and I agree whole heartedly! You're a virtual gold mine of information, and I hope you continue making videos on a regular basis. . .Thanks again.
Thank you :)
"Three guys touching eachother [...] one man is on top of the other". This man's seen some things...
Kramsiv, that is why its call the POSITION Property. :)
awesome tutorial i get it now bring more css tutorials
Let me know if you want a tutorial on specific topic. thanks for watching
So if a elements position is absolute,,,it will float on top of everything and have a position relevant to the top left corner of its parent (IF its parent is relative)..and if its parent isnt relative,,it moves in relevance to the BODY's top left corner?
yes .
It is relative to the parent if the parent is not static.
"Absolute: The element is positioned relative to its first positioned (not static) ancestor element"
From source: For an absolutely positioned element, where the left, top, etc. are calculated from depends upon the position property of the parent and grandparents of the element in question. If the parent of the element is a positioned element (meaning its position is set to anything except position:static), then an absolutely positioned child is positioned relative to that parents rectangle (or grandparent, or great-grandparent, etc). But if none of the parents are positioned elements, the child is positioned relative to the bounds of the document.
I wish I had seen this video some months ago. I would have avoided so many useless readings. Thank you.
I am glad you learnt something. keep learning the fundamentals.
This video helped clarify the difference between status, relative, fixed and absolute - thanks. I do wish it would have shown how to make a page fit “snugly” under a menu header (for instance), so you could write one menu and have each following page section line-up beneath it (without overlap??) I guess I'll be working on that myself.... Good video though - keep-up the good work.
Css issues can be tough but once you solve it very much satisfying. Good Luck :)
I could not understand these position attributes until I found your video. Thank you!
Thanks for watching Chimi!
Very Nice, position element is hard tio understand, this is a good definition I found that might make it easier to understand:
"What Is Absolute Positioning?
This type of positioning allows you to place your element precisely where you want it.
The positioning is done relative to the first relatively (or absolutely) positioned parent element. In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself)."
This helped me so much
yes you got it Falcon.
Hey Man! Great video! Is it possible to have three elements (like one div with color (as a background), one text and an image below the text) and the image move down when the text get adjusted by the window shrinking horizontally. so i don't need to make viewpoints? I know that the objects arrange themselves, but if i put some background element, i cant position on center. Did you understand? Hope you respond! Thanks e success!
FOr that you can use flex layout. its actually pretty simple. I have a video on that on my channel if you want to look at it.
@@Techsithtube Thanks man! I'll look for.
This is a very handy video for quick interview preparation. But I noticed that it is missing info about position sticky. It would be great if you could add this to your video. Thanks.
Unfortunately once video is added you can't edit it. I will make another video for that
Fuc..k me DUDE this was the best tutorial the best I've seen. THANK YOU :)
Best comment so far :) I am glad that it helped you!
As others have said, this is by far the best attempt to explain this confusing stuff that I've yet seen. Thank you, very good teacher.
Glad it was helpful!
Thank you for the video--really helped explain the difference and not make it so complicated.
This is by far the best explanation of these position properties.
GREAT! Cleared the entire concept of POSITION property. It just cleared all my doubts. Thanks for the video
thanks for watching! :)
techsith Welcome
Tough topic explained with simple examples! Thanks for sharing.👍
Thanks Nizamuddin for a comment. Keep on learning!
Just found you today.. this is the best explanation of "position" I've found.. "Position" and I don't get along.
lol. :)
Thank you for explaining this. It was very helpful!
Nicely explained. Thanks.
Few points.
* absolute: When no top/left/right/bottom(TLRB) are mentioned, the element stays where it would stay as if it was static. But it is not entering into the flow. When the TLRB are mentioned then it is relative to it's first relative ancestor.
* fixed: Its not relative to the root element. But its relative to the window screen size. During scroll the root element is scrolling up, but the fixed element stays there.
Nice one
On top of each other always gets me..
Thank you brother ...it's very useful :-)
Thanks for watching!
very usefull tip Bro,Thank u
at 4:20 what's the practical difference between let's say left and margin-left?
There's a difference:
when you say left then what left you want to change , since there is margin,padding,border . Therefore you have to specify margin-left to produce desirable effect on margin of your box(every element in html is a box) .Hope this hepls you to understand 😊
Quality content. Good job.
awesome video , thanks for the information! (Subbed)
thanks for watching! :)
good
Great explanation. Thanks a lot. :)
Cool, Thank you. I have better understanding of absolute position now. Example helped a lot. Would be great to have more examples to see it.
i subscribed your channel though there are few videos in your channel but these fews videos are better than ton of so called guidance videos.
sir i want you to upload vids on bloggers.
Thanks for watching. Let me know if you want some topics coverd. Also, I havent not done bloggers. Are you taking about the googles blogger?
sir i want you to upload videos on " how to customize blogger templates" how to make inside changes in blogger template. Above all how we can get information resources for our bloggers etc.
Sir You made it so easy. thank you for this wonderful video
I am glad that you learnt Ziaul. thanks for watching!
I seen this in 2017 before going to interview . positioning is the only question Interviewer asked me in css section and i gave these answers with same example and the interview went well . I got selected also . In my job i haven't touched css not even opened a css file my work is just did JavaScript . Today i am changing my job and going for interview came back here to recall positioning .
Thanks sir really appreciate your time that you make tutorials
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!
Really good video extremely happy I clicked on it
Thanks for watching Tyree.
Thanks for this tutorial explaining CSS positions: absolute, fixed and relative. Very well defined
Hi, thanks for the video. Why at 9:27 the div second common didn't overlap the div first common but actually overlapped the third? As you said, its parent is the body. Thank you
finally someone explained it clearly :)
I'm kind of a beginner....I realize this is just demo for positioning, but you're not showing the real html, right? You have div classes of "first, second, third" and "common" in your css, and "first common", etc in your html. What's going on there? I guess I just learned something new. One more question....how do you get the fixed effect with a logo/ad,etc if you need a responsive website? Nice video, and I'll study it. Thanks!
fixed position inside a responsive website would just work fine. you just have to put it inside a @media query accordingly.
it really good and it very usefull
Finally I understood the position property !
Thank you so much for being so clear and to the point :)
Great explanation, thank you
Thank you for this clear explanation. It's potentially VERY confusing topic.
10:15 May I ask what are you using to enable you to add that div element with a class of parent just by typing ' div.parent '?
I like your examples , very clear explanation
Thanks for watching! :)
I usually don't comment on youtube videos but, this tutorial was great.
I like how you show everything in one screen instead of flicking back and fourth to show css results.
took me a couple of days but i finally understand. Thanks
"There are three guys touching each other." O_o
well becase they are inline and there is no space in between :)
its disgusting, why they are touching each other, they need pink girl div XD
At about 11:00 of the video,you set .second {position:absolute} without .parent's position being set to relative, then the width of "second" changed. Do you know why that is? thank you!
Finally, I've been kind of struggles understanding CSS position property. Watching this vid makes it clear. Thanks a lot!
Its great! Worth watching
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)
I've finally managed to understand these concepts thanks to your video. Thank you so much, I subscribed.
I am glad it helped. thanks for watching! :)
Wow! Such a simple and to the point explanation. Will be watching your other videos as well! 👍🏻
Thanks for watching! :)
thanks for the valuable info giving us.......
Thanks for watching!
Really good explanation ...
Best tutorials on JS and CSS I have ever seen so far with awesome explanation.Kudos!!!!!
Like for WebDesign :) Like for your channel :)keep up the good work
thank you for the examples! really helped me understand the concept
You look confused lot of times ps try to use correct explanations ex:- static means that the element follows the normal document flow. What you said in the video about it is not clear, incorrect and confusing
I had watched several explanations without much success but I think I finally got it thanks to you man!
ye
thank you it helped a lot
Great Video.You explained this really good!Since I could not understand position properties in Css,so I came to this video.Thx!
very useful ....thank you for awesomeness
Thanks for watching! :)
Great job on this video. I learned a lot.
Thanks for watching
Great video, really good explanation !!
Thanks for watching !:)
thanks for tutorial but i have made a full screen slider and i want a transparent menu on it but when i make their position absolute the div and text disappear but only on clicking the inspect the text just glows once can you help me please i am stuck?
Explained in a very nice and slow way.
Suman, thanks for watching!
Question. Can you just change the padding instead of using the relative position just like what you did at 5:26 ?
Padding would push the element next to it. relative position wont. so depend what kind of behavior you are looking to get.
techsith thank you
thanks for such a clear cut explanation :) liked it bro
Ah now I understand absolute vs. relative positioning. Great overview, thanks!
Thanks for watching! :)
was struggling, but now clear! A big thanks and like the way you deliver :)
Glad you got it. Thanks for watching!
Three guys standing next to each other,... Touching each other 😮 say WHAT 😂😂😂👋
best video that explain this!! thank you for super clear explanation! Subscribed~
Thanks tomorrow is my interview and i am confused with this positioning .. but now all clear :) thanks.. helpful tutorial
Good Luck with your interview. Let me know how it goes.
Really useful tutorial! Would recommend watching it on 1.5x speed though
Thanks for watching Caleb.
This is a hugely helpful tutorial, why didn't you put this together with your flex-box tutorial into a playlist?
Your explanation helped me detect a lot of issues that were in the UI in a project I'm working on. There are just so many dirty hacks (guess and check) being used just to make the elements display properly.
Thanks man! I was getting fed up reading junk on StackOverflow being voted as best answer, that encourages filthy work-arounds; absolutely horrible for responsive app design. It's things like this that makes me want to stick to back-end.
I feel your pain. CSS is very annoying when it doesnt work . Use Sass if you can instead of directly modifying CSS. Good Luck!
its so helpfull to understand thank u
Great lesson. Thank you
Glad you liked it! Thanks for watching!
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.
I realized what I have done after reading some of the comments like yours. :) I hope it provided some entertainment.
Really nice video. Very clear explanation and very detailed.
Finally some simple and helpful explanation
how positions behave. Thanks!
Thanks a lot. It was very clear and useful. I think this time I've got it XD
Thankyou so much for great explanation
Nice explanations! Keep rocking!
nice tut, keep going ,thanks a lot
Thanks for watching!
7:52 so taking this situation for example, judging that 'default position' is static, then I assume:
First: "static".
Second: absolute.
Third: "static".
Does this mean that 'static' will always end up behind 'absolute'?.
great!! i never understand this positions.. but after watching your video i totally understand..thankyou so much !!!
Thanks for watching :)
great information, but i think fixed position will determine the position based on the viewport. am i right?
very nice tuts
This lesson cleared my misunderstanding so much. Thank You.
great video on the position property.I am a newbie and this really does help. Thank you.
This was a very clear and direct way to explain positioning....Thanks !!
..I ran to comment like thanks much even before completing the video
Appreciate
Great video! Thank you so much! Made learning how to use different positions with CSS easy!
the best tutorial ive ever seen about positioning,others only speak speak speak but no example,hats off