CSS position deep dive
Vložit
- čas přidán 1. 06. 2024
- kevinpowell.co/courses?... 👈 Looking to up your CSS game? I have a bunch of courses, including several free ones.
With over 700 videos on CZcams that are almost all entirely about CSS, I’ve somehow never made one that looks at all the CSS position values! I’ve compared relative and absolute in the past and done a few looks at sticky, but I felt like one deep dive video would be a good idea.
There are a handful of videos like this one on CZcams already, but I find they try to cover the information as quickly as possible and don’t go into enough detail on things like how containing blocks work, and some of the small gotcha’s that you can run into. They also tend to use random floating boxes, so I tried to root this one into something a little more realistic.
🔗 Links
✅ Using position absolute in a responsive layout: • Position absolute and ...
✅ More on stacking contexts: • Solve your z-index iss...
⌚ Timestamps
00:00 - Introduction
01:10 - What we are starting with
01:40 - position: static
02:55 - position: relative
05:50 - position: absolute
13:47 - position: fixed
18:40 - position: sticky
24:20 - strange things that can break your positioning
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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
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
It’s amazing the amount of knowledge we can have from your content. Thank you very very much for doing what you do.
The man, the myth, the legend
Love how simple the explanation is and yet in depth in this tutorial. Really easy to understand. Thanks!
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!
This reminded me I knew more than I thought-- and that's a huge help when it's so easy to get overwhelmed! 🙏
This great lesson came just in time for me. 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. 😅
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
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
I'm not too much into CSS, but I simply love the content which you deliver.
Sticky seems very cool! Thanks for explaining!
The best video on positioning elements. Thank you soo much.
thank you Kevin!!!! i have always had issues with position. what a relief 😅
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!
great video Kevin Powell. Thank you
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!
Just awesome, love it! 🎉
I was waiting for this day 4 a long time!
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
Brilliant. Thank you so much for a clear explanation
Very nice, I feel like I forgot about the tradeoffs of postiion sticky and fixed so this was a great refresh.
finally a worthy video!!! my positioning willl become legendary
While seeing title I was hesitant there is another repeated content about position but it was new thing thanks for share guruji ☺️
Thank you, Kevin!
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.
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 🎉😊😊
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.
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!!!!
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've dreamt of this video. 😊
Спасибо6 онь дельно, многие моменты как раз не мог понять поведение - а сейчас встало на свои места!
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!
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'.
perfect timing for this video to come out for me lol
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.
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
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!
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.
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.
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 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
filter/contain: layout can also break display: fixed (but not for sticky), not only for absolute.
thanks bro❤❤
i need this!
just in time👍👍
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).
love it
Thanks!
Thanks so much Sam!
Thanks
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]
top content
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...
One very important gotcha with position sticky is it doesn't work if any ancestor has overflow:hidden on it.
hurray🎉🎉
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
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);
}
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 ❤
Hi, it would be helpful if you also provide the link to your demo, thanks so much!
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}
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
Is there ever a practical scenario when you would use position relative with insets instead of a translation?
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.
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.
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.
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 :)
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 :)
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 😅 - czcams.com/video/GS6b9p6edfk/video.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.
Web Dev simplified vs Kvein Powell, who wins?
Hey, have you ever done a deep dive on display?
Sort of with this one: studio.czcams.com/users/videoty4lnEUy7SY/edit
still confused and cant do what I want to do
Thank you soooo much! I wanna be your friend 🥹
Next the non beginner friendly position: fixed and width?
I looked at it in this one, the Technique #4 in the chapters/timestamps - czcams.com/video/87YMCtsBoCM/video.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 guy she tells you not to worry about
from india.
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.
I don't get it 😕 HTML makes sense, Jc makes sense, figma is fling simple. But css? What the fuck
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
Plz speek in slow English
Watch at 0.75x speed. ;)
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 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😅
Thanks