I have been putting off updating my CSS knowledge for ages, the last couple of days I have been binging on a lot of your videos and it has certainly put the wind back in my sails! You do a fantastic job and explaining stuff, with just the right amount of detail without overwhelming or straying too far from the original purpose. I can also sense the true passion you have for CSS in general, and learning / sharing that - which is a huge motivator for anyone watching! Awesome work
This is amazing, I was planning on teaching students about the position property next week. And I might use this video for some more information about the topic. I always refer to Kevin as "my god" to my student. I consider myself quite an adequate frontender. But each video of Kevin just proves I have so much more to learn. And as frustrating as it sometimes is, it's also cool to have something new to learn.
I have the advantage of basically being able to focus on only one langauge, so it's easy to know it really well. I remember when I was teaching in the classroom spending a lot of time looking up videos to help explain stuff like floats, back in the day 😅
@@KevinPowellI write all the material myself, but that's only the basics of styling. I just started with teaching them flexbox and I made some real improvements this year! But I also keep referencing you to students who want to dive deeper into CSS. So thanks for all the amazing content and all the stuff you thought me as well! You broke my brain a number of times.
@@MichaelJoseph83 The video probably was "unlisted" and @clevermissfox had access to it through a direct link. People can comment on unlisted videos. The video is made public today.
For years whenever i have a problem with position ive just been changing the value randomly until it works and ive been too lazy to research further, thank you for this video! Finally pushed me to learn this stuff
Thanks for this video, i learnt a different easy method to fix my navigation bar, with the position to sticky and top 0,left 0.. And the z-index to 10.. Thanks man 🤝 Tha k
Wow, I was just saying to myself that I didn’t understand CSS positions like I should and should really deep dive into them; what a coincidence. Thanks Kevin.
Thank you for the amazing content! It's also great to note for the last part of the video "strange things that can break your positioning" that this could happen to position fixed as well. I once encountered an issue where I had a card with a fade up on scroll animation and inside the card was a custom popup with position fixed. However, the popup behaved as if it had position absolute instead of fixed. The problem was that in the end of the fade up the animation the card is left with a transform: translate(0, 0) or translate3d(0, 0, 0). I'm kind of used to strange situations in CSS, but this was a bit weirder that usual and took me a minute to figure out. I believe transform: none fixed the issue in my case. Hopefully no one else runs into something like that!
Amazing as always ! Btw do not forget guys that the position: sticky and position fixed act as a position: absolute if the parent element uses the transform property because of a CSS bug
It's not a bug, it's part of the spec because of how formatting contexts work. Same with a few other properties too, and I address it near the end of the video :)
I just started learning web developement again, at the begnning is quite frustating, but understanding the essence of the concept, everything flows in the right direction, you just have to learn the core of the subject, one thing attracts the other
Hello sir , u are one of the persons who really mastered css , if u could please create a full course of css 2024 , what people actually need to get hired , the most important css rules and how to apply them , if someone share the same idea make a like ❤
Sticky is great. Not having to rely on Javascript for this kind of stuff is a good thing. On the topic of scrolling, I use the GreenSocks libraries a lot. I hope all that stuff will be possible natively one day!
Please make a deep dive video about animation-range values/syntax. Spent a couple of hours trying to get a sticky header get animated only within certain range. Tried with scroll(nearest|root block), tried with view(). [Yes, I know FF and S support is missing today]
You haven't mentioned that position:absolute also establishes a new containing block just like position:relative, which makes nesting absolutely positioned elements possible
This concept of containing blocks have anything to do with the concept of stacking context? I'm new to this but apart from the z-index requirements present there, the rules seem pretty similar...
I have been using position absolute on overlays, to give some images a color overlay with text, but as a beginner the constrains of these, specially when making the site responsice are still a bit of a mindfield. Is the use on positioning absolute/relative good in this instance or is there a better approach? Just to give some context I put the code below. If anyone has any feedback it would be appreciated .product { width: 33.333%; position: relative; } .product img { width: 100%; height: 100%; object-fit: cover; } .overlay { opacity: 0; position: absolute; background-color: rgba(214, 165, 41, 0.80); width: 100%; height: 100%; padding: 15px; transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }
Positioning an absolute div inside a relative parent every now and then for something that needs to be fixed inside the relative parent is good, right?
About position fixed header, you said that there is better way to fill in empty space then with margin/padding after it escapes content flow, but you never mentioned what is the better way or did i miss it ?
@@victornunes5888 but if the header is sticky it cant go all the way down to footer, or at least i never managed to make it work at full hight websites, i always had to go fixed header and then add margin/padding to fill in space
@@fendularatsq2317 That's true. For that use case, fixed + workaround with margin/padding can solve the problem. I do this (and create a CSS var to avoid repeating property editing; change once and it's fine). Sticky, as Kevin taught, is useful for always-on-top navigation bars.
thank you for the great content, I notice something weird with sticky position if it contains links, while nsvigate using keyboard tab key content keep jumping up. any soultions?
Maybe not such an important point, but if your editor is in dark mode, then an example design with a darker background would be much more comfortable to look at. The contrast is quite strong. People with a bad eyesight may have some problems with it.
If there's a way, I don't know what it is. The only one that I know is Polypane, which is a browser made for devs, because I made a video with the creator of it when he added the feature 😅 - ua-cam.com/video/GS6b9p6edfk/v-deo.html
Great video..but i don't understand why you add your face on the video. Its so distracting and doesn't have any purpose.. Its fine if its in the beginning or at the end. But all the time?? Come on man. We dont wanna see your face😅
Could you please grace us with 'minimal reproducible examples' featuring nothing but plain colored divs as parents and children? Your current example, teeming with realism, is an absolute cognitive marathon with its myriad of items. It's quite the spectacle, really-so much so that it's a bit of a nuisance to sift through all those superfluous details.
Great Content Kevin. But for beginners, it's better if don't jump all over the place or introduce more advanced concepts. Keep it as simple as possible, remember your audience are not professional web developers yet. So slow and steady is better than opening multiple can of worms at one time. Also simplifying the html page could help as well. With that said, great Job on the lesson. 👍🏼
This is "crazy"... I am literally stuggling to study and finish my studies, and I soon have web developing exam with html, css, bootstrap and jsc... I am praying to Lord for help, and I literally was thinking about possitions in css... Because I did not understand well... And now you my brother... Thank you so much!
i was searching for a good video about css positions and i am very glad you uploaded this video today super helpful especially with position sticky not working in some cases Thanks
Had some issues with sticky/fixed/absolute where I basically didn't know which was appropriate to use and how to make it do what I wanted. Now I see I needed sticky and had some flexbox stuff messing with me all along. Hard to know without knowing :P Thanks for curing my ignorance and removing some frustrations
I have to say, when CSS Grid get started in the beginning I was there happy, and I adopted CSS Grid and some Flexbox and that it is... But to know positions always will be a must for a professional web-development, I always have some knowledge about position, but after Kevin I can say: I don't have some knowledge about position, I really understand position... You are a CSS Master and you do by love, I love CSS too like you but now, it is complete because now I can say that I really like position and some time it can make me great things even with the new techs I really understand it now, thanks master Kevin you are awesome 🎉😊😊
the backdrop filter bug' you can fix by having a container with the effect, position absolute, and z-index -1 under the container you want the fx on (with a position relative).
position: sticky with set left or right is useful for, no surprises here, horizontal scrolling. Not as common as top navigation of course, but find use with e.g. horizontally scrolling cards with an always visible first/last element. Or, in an enterprise environment, a huge horizontally scrollable data records display with sticky descriptions on left / action buttons on right. I would generally advise against using it nonetheless, horizontal scrolling is not too user friendly and there's also a small issue of horizontal stickiness being a bug magnet for Chromium based browsers.
I used to make a workaround with "fixed top nav-bars" using CSS var: something like ' - - topbar-height: 4em '. Then, I applied this var to the top nav-bar's height property AND to the margin-top property of the element next in order. It did the trick, but using sticky is way better. Goog to know! Thanks!
I ran into that grayscale bug with backdrop blur where my custom scrollbar element refused to stay fixed at the right side of the page. Took me a while to figure that one out. Sticky likes the viewport because it gets to look at you all the time, it will resist going away unless you make it 😂 I love position sticky.
Great video as usual :D It’s annex information but for declaring new stacking context I use isolation css property with isolate value. This property exist only for this, it's better to position: relative which can lead to side effects.
Excellent video! Query: You said this works with block level elements. What are those? I seem to remember there are multiple element types that are block level. Like table or td. What happens when you do this for a span element? Does it ignore the spans and keep on searching in the DOM hierarchy until it finds a block level element?
You mentioned sharing widgets, I try to use the webshare API. It triggers a native sharing dialog. Browser support isn't perfect, but it's pretty good.
Thanks Kevin, you've cleared up many questions I've had about the position property! You mentioned stacking context, and I'd like to mention a problem I had today, in case you make a video on stacking context someday. I had div with a ::before pseudo element, which I wanted to stick out from behind the original div. I used z-index: -1, and all was good until I added an animation to the ::before. I could not get that ::before to go behind the div, no matter what I tried, even tried different z-indices on them, translate Z, preserve 3D, I googled it and found some similar questions with no working answers. I ended up using a separate div with a containing div for them both. I figure if anyone knows why, it would likely be you. Your explanations and knowledge has helped me be good at and truly like CSS and vanilla CSS/JS !
It's a bit similar to the problem I showed at the end, but with stacking context. Depending what you were animating (transforms, opacity, some other stuff),, it created a new stacking context. When something is creating a stacking context, the elements inside it are stacking only relative to one another, not in the larger overall context of the page. So a negative one no longer goes behind everything, but only behind the other elements in that context
I looked at it in this one, the Technique #4 in the chapters/timestamps - ua-cam.com/video/87YMCtsBoCM/v-deo.html - i used absolute in that one, but it would work with fixed too. I thought I looked at it in another video but I can't find it
The man, the myth, the legend
I have been putting off updating my CSS knowledge for ages, the last couple of days I have been binging on a lot of your videos and it has certainly put the wind back in my sails! You do a fantastic job and explaining stuff, with just the right amount of detail without overwhelming or straying too far from the original purpose.
I can also sense the true passion you have for CSS in general, and learning / sharing that - which is a huge motivator for anyone watching! Awesome work
This is amazing, I was planning on teaching students about the position property next week. And I might use this video for some more information about the topic.
I always refer to Kevin as "my god" to my student. I consider myself quite an adequate frontender. But each video of Kevin just proves I have so much more to learn.
And as frustrating as it sometimes is, it's also cool to have something new to learn.
I have the advantage of basically being able to focus on only one langauge, so it's easy to know it really well. I remember when I was teaching in the classroom spending a lot of time looking up videos to help explain stuff like floats, back in the day 😅
@@KevinPowellI write all the material myself, but that's only the basics of styling. I just started with teaching them flexbox and I made some real improvements this year!
But I also keep referencing you to students who want to dive deeper into CSS. So thanks for all the amazing content and all the stuff you thought me as well!
You broke my brain a number of times.
I call him the king of CSS 😂
I also send students here for deep diving into CSS. He's our unofficial textbook. 😅
I was having issues setting up my navbar. This video helped me understand what I was doing wrong and fix the problem. Thanks, Kevin for your help!
how this video stays played even when u minimise youtube app ,without any premium subscription of youtube while no other video has this thing
I guess the video is... 🥁🥁🥁 position absolute
Bug maybe ?
Wait how tf, yeah its weird lmao
I thought it was happening only to me 😶🌫️
Bug because of the merch
22:09 never would’ve figured this out about sticky X display: flex w stretch. Great tip!
Omg the filter on the parent makes it relative? And transform?? Wow
Video barely a min old bro
@@MichaelJoseph83
The video probably was "unlisted" and @clevermissfox had access to it through a direct link. People can comment on unlisted videos. The video is made public today.
Patron's get early access :D
@@MichaelJoseph83 bro get on that patreon and you too can mystify people with your comment 💜
For years whenever i have a problem with position ive just been changing the value randomly until it works and ive been too lazy to research further, thank you for this video! Finally pushed me to learn this stuff
Thanks for this video, i learnt a different easy method to fix my navigation bar, with the position to sticky and top 0,left 0..
And the z-index to 10..
Thanks man 🤝
Tha k
Wow, I was just saying to myself that I didn’t understand CSS positions like I should and should really deep dive into them; what a coincidence. Thanks Kevin.
I just want to add some love to this comment section: you sir, are a Godsend. CSS is so frustrating but you make it easy. Thank you so much!
That's what im talking about, that's why he's the GOAT! THE GOAAT!!!!
Thank you for the amazing content! It's also great to note for the last part of the video "strange things that can break your positioning" that this could happen to position fixed as well. I once encountered an issue where I had a card with a fade up on scroll animation and inside the card was a custom popup with position fixed. However, the popup behaved as if it had position absolute instead of fixed. The problem was that in the end of the fade up the animation the card is left with a transform: translate(0, 0) or translate3d(0, 0, 0). I'm kind of used to strange situations in CSS, but this was a bit weirder that usual and took me a minute to figure out. I believe transform: none fixed the issue in my case. Hopefully no one else runs into something like that!
I'm not too much into CSS, but I simply love the content which you deliver.
Amazing as always ! Btw do not forget guys that the position: sticky and position fixed act as a position: absolute if the parent element uses the transform property because of a CSS bug
It's not a bug, it's part of the spec because of how formatting contexts work. Same with a few other properties too, and I address it near the end of the video :)
I learned this one the HARD way a few months ago
finally a worthy video!!! my positioning willl become legendary
I just started learning web developement again, at the begnning is quite frustating, but understanding the essence of the concept, everything flows in the right direction, you just have to learn the core of the subject, one thing attracts the other
It’s amazing the amount of knowledge we can have from your content. Thank you very very much for doing what you do.
Thank you kelvin, you always the Best 🏆
thank you Kevin!!!! i have always had issues with position. what a relief 😅
how is it possible to make 700 videos on css...that seems impossible. but i've watched tons of your videos this week, and they've helped a lot. ty!
The best video on positioning elements. Thank you soo much.
perfect timing for this video to come out for me lol
Hello sir , u are one of the persons who really mastered css , if u could please create a full course of css 2024 , what people actually need to get hired , the most important css rules and how to apply them , if someone share the same idea make a like ❤
filter/contain: layout can also break display: fixed (but not for sticky), not only for absolute.
Спасибо6 онь дельно, многие моменты как раз не мог понять поведение - а сейчас встало на свои места!
Very nice, I feel like I forgot about the tradeoffs of postiion sticky and fixed so this was a great refresh.
Sticky is great. Not having to rely on Javascript for this kind of stuff is a good thing. On the topic of scrolling, I use the GreenSocks libraries a lot. I hope all that stuff will be possible natively one day!
One very important gotcha with position sticky is it doesn't work if any ancestor has overflow:hidden on it.
Brilliant. Thank you so much for a clear explanation
great video Kevin Powell. Thank you
Please make a deep dive video about animation-range values/syntax. Spent a couple of hours trying to get a sticky header get animated only within certain range. Tried with scroll(nearest|root block), tried with view(). [Yes, I know FF and S support is missing today]
Thank you, Kevin!
Great one🎉
thanks a lot for that vids and very good courses .... big thumb up
One way position still throws me off at times is how it interacts with overflow and its various related rules and potential values
This video will be my N°1 Go-To Video, when CSS mocks me.. All those properties are in my head, but the interaction that might cause errors not.
Stanton Shoal
I feel this is something many people still get confused
A great tutorial on positioning in CSS. Thanks, Kevin.
{2024-05-12}
Just awesome, love it! 🎉
Thanks
You haven't mentioned that position:absolute also establishes a new containing block just like position:relative, which makes nesting absolutely positioned elements possible
I do mention that any position, other than static, does that at one point in the video :)
This concept of containing blocks have anything to do with the concept of stacking context? I'm new to this but apart from the z-index requirements present there, the rules seem pretty similar...
I have been using position absolute on overlays, to give some images a color overlay with text, but as a beginner the constrains of these, specially when making the site responsice are still a bit of a mindfield. Is the use on positioning absolute/relative good in this instance or is there a better approach? Just to give some context I put the code below. If anyone has any feedback it would be appreciated
.product {
width: 33.333%;
position: relative;
}
.product img {
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
opacity: 0;
position: absolute;
background-color: rgba(214, 165, 41, 0.80);
width: 100%;
height: 100%;
padding: 15px;
transition: opacity 300ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
love it
Thanks for the video.
Please what screen Recorder App do you use?
i need this!
Web Dev simplified vs Kvein Powell, who wins?
Positioning an absolute div inside a relative parent every now and then for something that needs to be fixed inside the relative parent is good, right?
Thank you soooo much! I wanna be your friend 🥹
About position fixed header, you said that there is better way to fill in empty space then with margin/padding after it escapes content flow, but you never mentioned what is the better way or did i miss it ?
Wasn't it the use of sticky instead of fixed? I think he kind of recommended using sticky for "fixed" headers (or top nav-bars).
@@victornunes5888 but if the header is sticky it cant go all the way down to footer, or at least i never managed to make it work at full hight websites, i always had to go fixed header and then add margin/padding to fill in space
@@fendularatsq2317 That's true. For that use case, fixed + workaround with margin/padding can solve the problem. I do this (and create a CSS var to avoid repeating property editing; change once and it's fine). Sticky, as Kevin taught, is useful for always-on-top navigation bars.
hurray🎉🎉
thank you for the great content,
I notice something weird with sticky position if it contains links, while nsvigate using keyboard tab key content keep jumping up. any soultions?
Ah, right because it's going in the natural tab order. Not sure there's much we can do there tbh
The guy she tells you not to worry about
Hey, have you ever done a deep dive on display?
Sort of with this one: studio.ua-cam.com/users/videoty4lnEUy7SY/edit
Maybe not such an important point, but if your editor is in dark mode, then an example design with a darker background would be much more comfortable to look at. The contrast is quite strong. People with a bad eyesight may have some problems with it.
Do either Firefox or Chrome debuggers allow me to see the stacking context? because that seems to be critically important.
If there's a way, I don't know what it is. The only one that I know is Polypane, which is a browser made for devs, because I made a video with the creator of it when he added the feature 😅 - ua-cam.com/video/GS6b9p6edfk/v-deo.html
Yes I tinkered with Polypane after watching that video. I'll need to keep it in mind if I'm debugging a position issue.
from india.
I wish you could speak in hindi, sometimes I am not able to understand what you are trying to say my english is not that good
Too fast, makes no sense.
Great video..but i don't understand why you add your face on the video. Its so distracting and doesn't have any purpose.. Its fine if its in the beginning or at the end. But all the time?? Come on man. We dont wanna see your face😅
Could you please grace us with 'minimal reproducible examples' featuring nothing but plain colored divs as parents and children? Your current example, teeming with realism, is an absolute cognitive marathon with its myriad of items. It's quite the spectacle, really-so much so that it's a bit of a nuisance to sift through all those superfluous details.
Thanks
I don't get it 😕 HTML makes sense, Jc makes sense, figma is fling simple. But css? What the fuck
still confused and cant do what I want to do
Fun fact about sticky and fixed:
On mobile, as soon as you pinch-zoom all bets are off. Nothing works as you expect it.
Yeah, that kind of 'fun'.
man, that align-self start to fix the sticky position is blowing my mind
Great Content Kevin. But for beginners, it's better if don't jump all over the place or introduce more advanced concepts. Keep it as simple as possible, remember your audience are not professional web developers yet. So slow and steady is better than opening multiple can of worms at one time. Also simplifying the html page could help as well. With that said, great Job on the lesson. 👍🏼
I always have a problem with position sticky on the sidebar, as I can no longer move it sideways out og the viewport
Hi, it would be helpful if you also provide the link to your demo, thanks so much!
This is "crazy"...
I am literally stuggling to study and finish my studies, and I soon have web developing exam with html, css, bootstrap and jsc... I am praying to Lord for help, and I literally was thinking about possitions in css... Because I did not understand well...
And now you my brother... Thank you so much!
i was searching for a good video about css positions and i am very glad you uploaded this video today super helpful especially with position sticky not working in some cases
Thanks
This reminded me I knew more than I thought-- and that's a huge help when it's so easy to get overwhelmed! 🙏
excellent explanation
This great lesson came just in time for me. Thanks Kevin!
Isn't there also an issue with position: sticky if the containing block has not the overflow default attribute?
indeed if any ancestor of the sticky positioned element has an overflow:hidden on it, position:sticky stops working.
Had some issues with sticky/fixed/absolute where I basically didn't know which was appropriate to use and how to make it do what I wanted. Now I see I needed sticky and had some flexbox stuff messing with me all along. Hard to know without knowing :P Thanks for curing my ignorance and removing some frustrations
I have to say, when CSS Grid get started in the beginning I was there happy, and I adopted CSS Grid and some Flexbox and that it is... But to know positions always will be a must for a professional web-development, I always have some knowledge about position, but after Kevin I can say: I don't have some knowledge about position, I really understand position... You are a CSS Master and you do by love, I love CSS too like you but now, it is complete because now I can say that I really like position and some time it can make me great things even with the new techs I really understand it now, thanks master Kevin you are awesome 🎉😊😊
the backdrop filter bug' you can fix by having a container with the effect, position absolute, and z-index -1 under the container you want the fx on (with a position relative).
position: sticky with set left or right is useful for, no surprises here, horizontal scrolling. Not as common as top navigation of course, but find use with e.g. horizontally scrolling cards with an always visible first/last element. Or, in an enterprise environment, a huge horizontally scrollable data records display with sticky descriptions on left / action buttons on right. I would generally advise against using it nonetheless, horizontal scrolling is not too user friendly and there's also a small issue of horizontal stickiness being a bug magnet for Chromium based browsers.
I used to make a workaround with "fixed top nav-bars" using CSS var: something like ' - - topbar-height: 4em '. Then, I applied this var to the top nav-bar's height property AND to the margin-top property of the element next in order. It did the trick, but using sticky is way better. Goog to know! Thanks!
I ran into that grayscale bug with backdrop blur where my custom scrollbar element refused to stay fixed at the right side of the page. Took me a while to figure that one out.
Sticky likes the viewport because it gets to look at you all the time, it will resist going away unless you make it 😂 I love position sticky.
Great video as usual :D
It’s annex information but for declaring new stacking context I use isolation css property with isolate value.
This property exist only for this, it's better to position: relative which can lead to side effects.
Excellent video! Query: You said this works with block level elements. What are those? I seem to remember there are multiple element types that are block level. Like table or td. What happens when you do this for a span element? Does it ignore the spans and keep on searching in the DOM hierarchy until it finds a block level element?
You mentioned sharing widgets, I try to use the webshare API. It triggers a native sharing dialog. Browser support isn't perfect, but it's pretty good.
Is there ever a practical scenario when you would use position relative with insets instead of a translation?
just in time👍👍
While seeing title I was hesitant there is another repeated content about position but it was new thing thanks for share guruji ☺️
top content
Sticky seems very cool! Thanks for explaining!
Love how simple the explanation is and yet in depth in this tutorial. Really easy to understand. Thanks!
Plz speek in slow English
Watch at 0.75x speed. ;)
Thanks Kevin, you've cleared up many questions I've had about the position property! You mentioned stacking context, and I'd like to mention a problem I had today, in case you make a video on stacking context someday. I had div with a ::before pseudo element, which I wanted to stick out from behind the original div. I used z-index: -1, and all was good until I added an animation to the ::before. I could not get that ::before to go behind the div, no matter what I tried, even tried different z-indices on them, translate Z, preserve 3D, I googled it and found some similar questions with no working answers. I ended up using a separate div with a containing div for them both. I figure if anyone knows why, it would likely be you. Your explanations and knowledge has helped me be good at and truly like CSS and vanilla CSS/JS !
It's a bit similar to the problem I showed at the end, but with stacking context. Depending what you were animating (transforms, opacity, some other stuff),, it created a new stacking context. When something is creating a stacking context, the elements inside it are stacking only relative to one another, not in the larger overall context of the page. So a negative one no longer goes behind everything, but only behind the other elements in that context
Great course, but what do you mean by "z-index land"? Isn't it only for stacking context ?
I just didn't want to get deep into how stacking context works, because the basics are simple, but it opens up a lot of extra things to explain :)
Millions of thanks on the STICKY part, never paid attention on it. It is so fantastic that I could ALWAYS learn something new from Kevin :)
We ALWAYS learn something new from Kelvin, GOD of CSS
I was waiting for this day 4 a long time!
I've dreamt of this video. 😊
Thanks!
Thanks so much Sam!
Next the non beginner friendly position: fixed and width?
I looked at it in this one, the Technique #4 in the chapters/timestamps - ua-cam.com/video/87YMCtsBoCM/v-deo.html - i used absolute in that one, but it would work with fixed too. I thought I looked at it in another video but I can't find it
thanks bro❤❤