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
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 "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 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 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 🎉😊😊
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!
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.
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.
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
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
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
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 :)
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.
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
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!
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 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 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. 👍🏼
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 ❤
I remember trying to use absolute bottom: 0 for a footer once, and I hated from the bottom of my heart that it didn’t stay at the bottom as expected. I left web design at that moment... or kind of.
You haven't mentioned that position:absolute also establishes a new containing block just like position:relative, which makes nesting absolutely positioned elements possible
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).
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 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); }
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.
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]
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...
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?
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?
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.
I looked at it in this one, the Technique #4 in the chapters/timestamps - ruclips.net/video/87YMCtsBoCM/видео.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
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?
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
Fr brooooo
man, that align-self start to fix the sticky position is blowing my mind
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
The man, the myth, the legend
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 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 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!
Love how simple the explanation is and yet in depth in this tutorial. Really easy to understand. Thanks!
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 🎉😊😊
Your explaination is clearer than my eye sight, Thank youu
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
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.
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.
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. 😅
This reminded me I knew more than I thought-- and that's a huge help when it's so easy to get overwhelmed! 🙏
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 💜
That's what im talking about, that's why he's the GOAT! THE GOAAT!!!!
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
While seeing title I was hesitant there is another repeated content about position but it was new thing thanks for share guruji ☺️
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
finally a worthy video!!! my positioning willl become legendary
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'.
It’s amazing the amount of knowledge we can have from your content. Thank you very very much for doing what you do.
The best video on positioning elements. Thank you soo much.
really amazing .. all of those confusion in one video is solved .. wow amazing .. great
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
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
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
thank you Kevin!!!! i have always had issues with position. what a relief 😅
This great lesson came just in time for me. Thanks Kevin!
Sticky seems very cool! Thanks for explaining!
Very nice, I feel like I forgot about the tradeoffs of postiion sticky and fixed so this was a great refresh.
This is good stuff. More deep dives, please!
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.
Great explanation sir... Learning things from you is always awesome... Very Informative video
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
great video Kevin Powell. Thank you
Thank you, Kevin!
filter/contain: layout can also break display: fixed (but not for sticky), not only for absolute.
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!
Brilliant. Thank you so much for a clear explanation
One very important gotcha with position sticky is it doesn't work if any ancestor has overflow:hidden on it.
I was waiting for this day 4 a long time!
Thank you kelvin, you always the Best 🏆
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 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 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. 👍🏼
Спасибо6 онь дельно, многие моменты как раз не мог понять поведение - а сейчас встало на свои места!
I feel this is something many people still get confused
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 ❤
I remember trying to use absolute bottom: 0 for a footer once, and I hated from the bottom of my heart that it didn’t stay at the bottom as expected. I left web design at that moment... or kind of.
Very useful info, thank you!
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!
excellent explanation
Just awesome, love it! 🎉
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 :)
Great tutorial! Thank you!
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).
Great video. You are a very good tutor!
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.
Rippin Plain
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
perfect timing for this video to come out for me lol
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);
}
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.
I've dreamt of this video. 😊
Great one🎉
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]
Thanks for the video.
Please what screen Recorder App do you use?
just in time👍👍
thanks a lot for that vids and very good courses .... big thumb up
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...
Stanton Shoal
Thanks
i need this!
Hi, it would be helpful if you also provide the link to your demo, thanks so much!
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?
A great tutorial on positioning in CSS. Thanks, Kevin.
{2024-05-12}
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?
Thanks!
Thanks so much Sam!
The guy she tells you not to worry about
love it
thanks bro❤❤
top content
Is there ever a practical scenario when you would use position relative with insets instead of a translation?
Why was the primary header not aligned to the top of the page when he first added position: fixed?
I always have a problem with position sticky on the sidebar, as I can no longer move it sideways out og the viewport
hurray🎉🎉
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.
Next the non beginner friendly position: fixed and width?
I looked at it in this one, the Technique #4 in the chapters/timestamps - ruclips.net/video/87YMCtsBoCM/видео.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
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.
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 :)
Hey, have you ever done a deep dive on display?
Sort of with this one: studio.ruclips.net/user/videoty4lnEUy7SY/edit
still confused and cant do what I want to do
I don't get it 😕 HTML makes sense, Jc makes sense, figma is fling simple. But css? What the fuck
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