I've watched a number of videos on positioning in css and this absolutely (pun) is the clearest explanation with understandable examples. anyone who doesn't get this simply isn't paying attention closely and may need to watch the video a few times over. looking forward to more of your vids!
Addendum to my earlier expression of gratitude: I "thought" I understood your explanation, but I really didn't. It took me several days to figure out that one of my assumptions was just plain wrong. However, after watching your video a few more times, and paying attention, I was able to figure it out. So, again I must thank you. Thank you!
Video summarized in a few words: ~ Relative: Used to position the element based on the webpage's sides. (top,bottom, left, right). So when you use top: 50px; for example, you position the element 50px from the top of the whole website. ~ Absolute: Used to position the element based on the sides of the PARENT element. So by doing top: 50px; with this one, you are positioning the element 50px from the top of the parent element.
Best explanation.Understand in one attempt although watched lot of stuff before this video but could not understand.Thousands likes.Good work.Really appreciate it.
I watched many videos on position but i didn't get any clarity, but this one is good and with in 3:36minutes I got an idea on relative and absolute.. Thanks for this video.
Thank You so much for this very clear, straight-to-the-point, no-frills, yet elegant and concise explanation. I've subscribed based on the creative intelligence and simplicity of your teaching approach on a tricky topic, based on this 1 video :)
Let me explain Suppose you have two divs - div1 and div2 Div2 is inside div1 ->
So if you give position: relative to div 2 , it will be remain in lts current position, so you can use top: , left: , if you want to move the div from it's original position And if you give position: absolute to div2, So you have give position: absolute to div 1 also , So it (div2) will take position of div 1 , if you use top and left in this div you can see it is moving not from it's original position, it is moving from the div 1 position
great explantion but one issue with your channel logo, your channel name is red stapler, but In the channel logo the stapler is white instead the background is red 😆
I am on the way learning position, and then I realized that when we are using position we do need to combine with top/right/left/bottom too, is that right?
So then "position: relative" means the box will be placed according to where it'd had been if it was "position: absolute "? So "position: relative" without any extra property, will look like "position absolute"?
AT GOOD LAST A CLEAR EXPLANATION! THANKS SO MUCH FOR THIS VIDEO. I HAD FORGOTTEN MY MATHS AND NOW I DO UNDERSTAND IT ALL HERE. COULD YOU ALSO DO OTHER VIDEOS ON FIXED, STICKY, ETC. THANKS...LOVE AND TAKE CARE!
Great video, great explanation....In order to fully understand though I would recommend everyone to replicate your examples in their code editor... Amazing Job!!
This seems like a really great video with well explained material.. but I can't focus on the narration as my brain picks up the music first and in a few seconds I realize I have no idea what's going on in the video... it's really hard for me to follow along... but it seems really well put together.. I got half way through.. I've paused.. gone back.. but my brain picks up the music first over the narration time and time again... Ugh! Good video though, I just wish I could watch it.
This is great, but at least for me it would have helped if the boxes weren't named box-1, box-2, etc. The names could have included the color too. I mean: box1-pink, box-2-yellow, etc.
I've watched a number of videos on positioning in css and this absolutely (pun) is the clearest explanation with understandable examples. anyone who doesn't get this simply isn't paying attention closely and may need to watch the video a few times over. looking forward to more of your vids!
Very useful. I may have to watch again a couple times to get it set in my brain but this is the best explanation so far.
I had to also. But I got it in the end
agreed!
Addendum to my earlier expression of gratitude:
I "thought" I understood your explanation, but I really didn't. It took me several days to figure out that one of my assumptions was just plain wrong.
However, after watching your video a few more times, and paying attention, I was able to figure it out. So, again I must thank you.
Thank you!
Actually seeing people show the difference is way better than having it explained in words lol, thanks.
Custody is complicated when parents can't get along.
Kidding aside, this is the best simplified explanation so far! Thank you!
LMFAOOO, clever one
Video summarized in a few words:
~ Relative: Used to position the element based on the webpage's sides. (top,bottom, left, right). So when you use top: 50px; for example, you position the element 50px from the top of the whole website.
~ Absolute: Used to position the element based on the sides of the PARENT element. So by doing top: 50px; with this one, you are positioning the element 50px from the top of the parent element.
this is what i needed
I may be wrong but isnt it opposite?
This seems opposite
Best explanation.Understand in one attempt although watched lot of stuff before this video but could not understand.Thousands likes.Good work.Really appreciate it.
It's the first time I understand the difference, thank you for the video, you're the best one who explained this topic
The basics are always important. Thx for sharing your great content. ;-)
I know I'm kind of off topic but do anybody know a good website to stream newly released series online ?
when people say that they want good content, this is what they mean. great video
I watched many videos on position but i didn't get any clarity, but this one is good and with in 3:36minutes I got an idea on relative and absolute.. Thanks for this video.
the best explained video on this topic. easily understood. thanks so much
thanks bro, absolutely the most easily understanded video about this topic. thanks a lot
Thank You so much for this very clear, straight-to-the-point, no-frills, yet elegant and concise explanation. I've subscribed based on the creative intelligence and simplicity of your teaching approach on a tricky topic, based on this 1 video :)
So basic yet so essential! Much nicer explanation than GPT 😁👍🏻
most concise explaination i've ever watched, thanks
Completely mind-blowing teaching! Do you have any CSS playlist?
Need this once in a while to refresh my mind thanks , clear and concise
Thank youuuuu. Crazy how something so simple can make you struggle at the beginning :D
just made me more confused
watch it a coupple times more. I had to. I got it in the end
maybe you are THAT stupid
Turn on the subtitles and watch;! it'll be understood
Let me explain
Suppose you have two divs - div1 and div2
Div2 is inside div1 ->
So if you give position: relative to div 2 , it will be remain in lts current position, so you can use top: , left: , if you want to move the div from it's original position
And if you give position: absolute to div2, So you have give position: absolute to div 1 also , So it (div2) will take position of div 1 , if you use top and left in this div you can see it is moving not from it's original position, it is moving from the div 1 position
@@infoharvesterAswear
I've been confused about this even after watching so many tutorials, but this one did the trick
Clear explanation, no bla-bla. Great job! Thanks a lot! Like the video.
very helpful thank you 🙏
Thanks, very clear explanation! Best so far I have found.
1:45 why the box2- absolute still in the center ? the box-1 is unset, shouldnt box-2 goes outside to the top-left of the window too ?
when you realize the red stapler stapler is a white stapler, thanks for the video btw it helped alot
This is the simplest i have come to, thanks althought i don't feel 100% confortable i got a better more solid understanding
great video... better & easier explanation than all other lengthy videos
By far the best tutorial on this topic!
you sure about that?
@@sergiohilario426 It's just my opinion. Do you know a better one?
And just like that, something that was confusing me has been simplified. Awesome!
Best explaination i ever seen
this is much more easier to understand compare to the previous videos i watched
Thank you for explaining this so well.
It is a comprehensive video, I must say!
Why isn’t box 2 attached to body when we set position absolute just as box 4. Isn’t it that box 1 has position unset ?
Clear as crystal!! Wooaah! Thank youu! God bless! New subscriber here!
Interesting explanation, thank you!
great explantion but one issue with your channel logo, your channel name is red stapler, but In the channel logo the stapler is white instead the background is red 😆
Great video, your explanation is very clear and consious. Thank you very much.
Thanks for explaining it, i thought the parent is supposed to be relative for the absolute to work properly
I am on the way learning position, and then I realized that when we are using position we do need to combine with top/right/left/bottom too, is that right?
Your explanation is quite clear, however, you should volume up your voice a little bit so it can be easier to be listened to
Thank you for that, so much easier to understand now I've watched it a couple of times
why doesn't box 2 positions itself in the top left corner when it is set to "absolute" ? There's no positioned parent to box2...
So then "position: relative" means the box will be placed according to where it'd had been if it was "position: absolute "?
So "position: relative" without any extra property, will look like "position absolute"?
I am still confused
thanks red stapler for making this video🙏
AT GOOD LAST A CLEAR EXPLANATION! THANKS SO MUCH FOR THIS VIDEO. I HAD FORGOTTEN MY MATHS AND NOW I DO UNDERSTAND IT ALL HERE. COULD YOU ALSO DO OTHER VIDEOS ON FIXED, STICKY, ETC. THANKS...LOVE AND TAKE CARE!
Sir position Absolute May Problem is coming when the positive Absolute commits his lower element to his upper body. How to fix ???
best explantation thank you and keep going .
Is not static is the default value for position why it was set to unset bt default?
Great video, great explanation....In order to fully understand though I would recommend everyone to replicate your examples in their code editor...
Amazing Job!!
clear concise and straigth to point
Excellent explanation
wow , thanks for your help! its seems to be easy, but sometimes confuses even the most experient. thank you.
Bro's Intro Music 💀💀
Excellent explanation.
This seems like a really great video with well explained material.. but I can't focus on the narration as my brain picks up the music first and in a few seconds I realize I have no idea what's going on in the video... it's really hard for me to follow along... but it seems really well put together.. I got half way through.. I've paused.. gone back.. but my brain picks up the music first over the narration time and time again... Ugh! Good video though, I just wish I could watch it.
I understood perfectly. Thank you. All very clear
great video...thanks...and a question....which is better for top, bottom, left or right parameters in position absolute using? px or percent?
question: when you change box 4 to relative while top and left is value to 0, where would the box positioned?
oh my god! I never knew this until now. i feel like an idiot
Very nice explained. Thank you!
well-explained! thank you very much!
awesome and quick explanation. thank you!
thank you the video covers the concept brilliantly
at first watch it is like Arabic, after the second watch you'll get it perfectly, if not, try the 3rd watch.
Thank, you clear my confusion😁
thank you this was a clear explanation
I use them alot, but know I know how they actually work. Thanks! ;-)
Great explanation thanks
Спасибо. Доходчиво, коротко и ясно!
That's a clear explanation.
But please, can you add the whole code of CSS to the description?
Regards.
Clear and concise. Many thanks.
Great explatanition , My advice: watch it from 0:28
i didn't know a parent div size could be determined by it's children div
When box-1 became only its padding, I was like whhhhhhhaaaaaaaaat......
hey can you share the source code for this turtorial, i think it would be really useful to use for testing
Great visualization!
Thanks. This was really helpful
This is great, but at least for me it would have helped if the boxes weren't named box-1, box-2, etc. The names could have included the color too. I mean: box1-pink, box-2-yellow, etc.
Very clear explanation,, keep doing 👏 @@@
that makes so much sense !! thanks
Good explanation.
Crisp and clear👌👍👍👍
Very helpful, thank you!
Understandable. Thank you for this
Short and sweet!
Thank you!
Absolute is positioned to parent and relative from the original place
I came here to clear my doubts. I now have added more and more doubts 😫😫
Best explanation
Great one for me.
Nice Explination
Well explained
I still didn't get that. Can you explain it in much more simple way?
Amazing Content
Best explanation thank you very 🙏
brilliant
What a beutifull content it is very usefull man tnx
i dont get how u centered the boxes