Positioning has always been a sticky subject matter, relative to other CSS topics. This video has fixed so many issues I had. Absolute outstanding video KP.
Well explained. One thing regarding position fixed. All of those properties you've mentioned (perspective, backdrop-filter, etc.) are not a creating a "weird edge cases" :). Those properties, including position fixed, cause the browser to create a new composite layer. Element with position fixed is actually 'limited' to its parent layer, not the viewport nor its parent "element". If parent element creates a new composite layer, then position fixed element is inside that layer and is limited to it, otherwise it is fixed in the main, document layer. There is a layers panel in dev tools (ctrl/cmd + shift + p -> "layers") where you can view the layers and see why they got created.
I’m a student who wants to be a front-end developer and I’m so greatful for your videos, thank you so much. You make it all so interesting and so much easier to understand.
Wow. I usually don’t comment, but this video deserves all the likes and all the comments in the world. Nobody explains these concept in the usual tutorials and this information is also hard to google. Great job, Kevin!
Always so thorough with your explanations. I already used "position : relative" on the "parent" of an element with "position : absolute". But I didn't know why I was doing that, it just worked. Now it all makes sense. Thank you
Interesting! These examples are indeed issues I run into , quite a lot. That together with z-index / stacking-contexts is a big reason I put some designs in the fridge. One of those design is multiple section dividers with clip paths and fixed backgrounds go under it once you scroll over, never got around into let it work properly.
*So many* things create a new containing block, from any sort of transform to masking or filters (including backdrop-filter). It's kind of rare to get into issues with it, but when it happens, in can be really infuriating and hard to debug if you don't know how containing blocks work
You're the best! 8:51This is EXACTLY what I was doing. I had an idea of containing blocks, but I wasn't sure. Now I know it IS containing blocks. Thanks so much for this video!
A good exercise is to position a container at various positions on the viewport. Top left, top right, bottom left, bottom right and centre. But not cheating with margins or anything like that. Then add another container and try to position two containers. Then three, and so on.
Great video! I still remember the frustration of the first time I crashed into the fixed position issue. I was working on a project where the design commanded the use a hamburger menu toggling a full-screen overlay on mobile, with the catch that the last item on the list was a highlighted button for the main CTA, and said button would be the only from the list that remain visible for wider viewports, fixed to the top right. Tried switching the button from its static position to a fixed one on wider viewports, but the transforms that toggled the overlay created a containing block, and the button end up nowhere to be seen xD
I avoid setting fixed widths and heights wherever I can. I really generally only use bits of padding here and there combined with either flexbox or grid plus some gap, depending on how insane the design is. If the content gets squished a bit width-wise, so be it. It's more natural for a web page to flow vertically/downwards anyway.
I sometimes use max-width, min-width, and min-height. Such as max-width: 72em; min-width: 9em; min-height: 3em; If I'm feeling fancy, I can use a clamp() or something
collapsing margins are a huge annoy i usually disable margins for everything and never use margins anywhere we already have `gap` now and we can just add padding to parent so margins are not needed much anymore unless you are rendering a document like md file and stuff, what html designed for in the first place way way before but now, margins are not needed by default for anything, it just creates confusion most of the time if im gonna render something like an md file or an article and stuff i would just put it inside a shadow dom anyway with an embed component and it would just work as expected
I want to stick footer at bottom of page. Case1: if content on page is less footer shift upword in viewport. I want to stick footer always stick at bottom even thought page length is less.
18:45 just yesterday I've used "backdrop-filter" and its broke everything, so I switched to do blur with ::before. Now, I guess, I understand what was the reason for that behavior xd
Hi, can you please do a video on the advantages of using BEM vs something like '.content .sub-component' etc? Seems to me you can just define what the role of each block is, and then target as appropriate via selectors?
I'm a total newbie at CSS but I have tons of experience writing code for myself but also debugging code that others have written. To me, the advantage of BEM would be: A) if I'm writing code, it will be easier to remember what I called the class so I would not be constantly having to look up "what exactly did I call that thing?" B) if I'm looking at someone else's code, I would quickly figure out the strategy and then be able to mostly guess what a class is meant to do just based upon the name rather than having to go look it up constantly. Generally, you want the "words" (the parts that make up a particular name in this case) of your "language" to be as minimal as possible so you can learn the entire language more easily. You want the "syntax" (the structure of you names) to be simple, logical, and concise so, again, it is easy to learn. Consistency is also going to play a major part in unburdening the mental load of "speaking" the language.
Its mostly for as projects scale and keeping everything at the same specificity level. The issue often isn't that people don't understand the impacts of raising specificity with descendant selectors, but when you have a team of people doing stuff, sometimes things get a little messier, and maybe someone makes a .title that messes with some .component .title that wasn't really intended to, so by having .component__title, you know the styles are more isolated. It's more of a "if we do it this way, there is less chances of running into some stupid problem that's annoying to fix" than anything. It's also just one approach, I personally think having some level of "nesting" with descendant selectors is fine, and can even help enforce proper markup.
Awesome tutorial as always. thank for it KP. Kevin, could you please create a tutorial about how to make a multilabel responsive mobile first drop down navigation menu & then hover effect on laptop/desktop version? All of the tutorials in this topic on YT are desktop first approach.
Not sure if it gets the "closing the quote job" done the same way, however instead of `content: close-quote` with a `font-size: 0rem` perhaps `content: no-close-quote` is more "elegant"? :two-cents:
Hey Kevin, tthink you could do videos on a Figma alternative Lunacy? I have been wanting to use it, but I prefer video tutorials. I hope you will do a video on it.
Hey Kevin, great video! At work we‘re only using scss by now, and I was just wondering why you aren’t? Do you have any specific reasons for that, because I think it’s just handier in every way. Thanks in advance!
If I want to learn something new every day I just watch your videos. Your range of knowledge is amazing. It's crazy how you can make CSS exciting. Well done man!!! !! IF YOU HAVEN'T SUBSCRIBED YET. SUBSCRIBE NOW. The work Kevin puts into these videos is a lot of work. I am sure he enjoys making them, but it's still a lot of work. Not to mention he does it with us in mind. So subscribe for him. Doesn't cost anything so what will it hurt. Nothing.
Great video Kevin! I’ve shared this with many of my colleagues. I’ve experienced setting a CSS transform on a parent element causes a ‘position:fixed’ element within to start listening to the container context of that parent instead of the viewport. Is there any other way around this? - other than moving the element to a different part of the DOM?
So position context for an absolute positionated element reletive to lets say , its relative positionatted parent is function of parent padding and element margins? Thank you!
I like the video. I hope my questions don't imply that I didn't... So, position: fixed looks at the view port EXCEPT for case A, B, C, ... Fine. But: A) Is there a reference to the complete list of exceptions? B) Do you know the "logic" of why these exceptions were created? If it is looking at the parent element with on of these special cases, how can that be leveraged to do something that others could not be done? Your course sounds like what I need. I'm going to check it out. CSS frustrates the @#$%!!!!!!! out of me. This helped although I've been listening to a lot of your other videos and some of these things have already been covered. OH!!! One point. The way that you diagnosed the problem with position: sticky is super helpful. That is the type of things I need. Teach me how to fish (i.e. how to debug and efficiently find solutions on my own)... don't just give me fishes (answers to specific problems).
The why for the position fixed thing is, from what I understand, a side effect of being able to get those things to work as they create new layout contexts, which the browser needs to be able to do for those effects. There is a list on the MDN page. As for leveraging it to do something useful... I can't think of anything as hard as I've tried, lol
Hi Kevin, and thank u for the video. I'm struggling with some position:relative/absolute creating a little map with some dots inside. The map has position relative and the 3 dots, has position absolute and some value in top and left for locate them in the correct city. In this type of work how can i achive the best responsivness?
11:35 hahaha now *that* kind of hack reminds me of old school CSS. Better leave a comment in that code, 'cause surely coworkers will have no idea why it's there
To join the puns train... Now this is a lesson that's gonna stick to my brain, and put me in a good position relative to my work. This video was an absolute pleasure to watch. Thank you.
1. To use Tailwind CSS, you need to understand CSS. 2. Not everyone likes it. 3. Tailwind CSS cannot be more performant than CSS because Tailwind CSS IS JUST CSS!!! Perhaps you meant JIT compilation and class reusability.
And as for performance, yeah Tailwind isn’t more performant, it’s just CSS. If you’re talking about a large scale production application… maybe? But I’m still not convinced that there are any data savings by taking clutter out of the style sheet and shoving them into the markup.
Is it though? They're just using purgeCS, which anyone can use. As for repeated CSS, once things are gzipped, you probably won't really see a difference anyway, and any decent host is going to gzip automatically. My website, while simple enough, is only shipping 4kb of CSS to the user. Even if using Tailwind would cut that by 50% (which I doubt it would), that's 2kb of savings. I could think of *a lot* of other things that would give me a bigger benefit. Let's bring things up to a bigger site, and say I have a 100kb CSS file (that's what tailwindui.com has), gzipped it's down to 18kb, which is what the user downloads. Even if I recreated their site without using Tailwind and had a 200kb or 300kb file, I'd only be shipping about 30-40kb to the user, and probably less than that since gzipping tends to have bigger effects on larger files (since there is more repeated code, which is what gzip is amazing at compressing). If you're worried about 10-20kb optimizations on a CSS file, you're down to the real nitty-gritty and probably wasting your time. I'm not saying this to poop on Tailwind. I get why people like it, and that's fine. I just don't like hearing about how it can help with performance, because I think there is a lot of disinformation out there on that topic.
And can someone please correct me if I’m wrong: I’ve observed tailwind doing some client side script processing to make the class names do some funky stuff they normally wouldn’t be able to do. If true, tailwind is certainly slower than CSS because it’s doing some JavaScript execution which CSS obviously does not
Once something is position: absolute, the display property sort of goes out the window, and it's pulled out of the flow anyway... I can't really think of a huge impact that it would have though, care to elaborate?
@@KevinPowell When I was trying to create a custom checkbox Using opacity 0 to make it not visible but still on the page And together with position absolute, the checkbox no longer takes space. Even when position relative is not declared on its parent or any containing block. The checkbox is still within its original containing block if you increase the opacity a little to see it. I think position absolute behaves different for input elements or inline elements in general.
Positioning has always been a sticky subject matter, relative to other CSS topics. This video has fixed so many issues I had. Absolute outstanding video KP.
This is going over heads
lmao
Nice one
Those subjective opinions of yours are relative.
Hahahaha
This puts me in a better *position* with my styling, thanks Kevin!
🥁
Hehehe he said it he said it
@@KevinPowell badum tisshh
I think the "funniness" of that joke is *relative* to the reader 🤔 xD
Well explained. One thing regarding position fixed. All of those properties you've mentioned (perspective, backdrop-filter, etc.) are not a creating a "weird edge cases" :). Those properties, including position fixed, cause the browser to create a new composite layer. Element with position fixed is actually 'limited' to its parent layer, not the viewport nor its parent "element". If parent element creates a new composite layer, then position fixed element is inside that layer and is limited to it, otherwise it is fixed in the main, document layer. There is a layers panel in dev tools (ctrl/cmd + shift + p -> "layers") where you can view the layers and see why they got created.
I’m a student who wants to be a front-end developer and I’m so greatful for your videos, thank you so much. You make it all so interesting and so much easier to understand.
I was just working on this exact problem. I choose to believe Kevin is making videos for me specifically.
Wow. I usually don’t comment, but this video deserves all the likes and all the comments in the world. Nobody explains these concept in the usual tutorials and this information is also hard to google. Great job, Kevin!
My guy actually saved my webdev assignment, thx a lot
Always so thorough with your explanations. I already used "position : relative" on the "parent" of an element with "position : absolute". But I didn't know why I was doing that, it just worked. Now it all makes sense. Thank you
Interesting! These examples are indeed issues I run into , quite a lot. That together with z-index / stacking-contexts is a big reason I put some designs in the fridge. One of those design is multiple section dividers with clip paths and fixed backgrounds go under it once you scroll over, never got around into let it work properly.
I like the picture in picture edits to accommodate your 2 screens, works great👌
*So many* things create a new containing block, from any sort of transform to masking or filters (including backdrop-filter). It's kind of rare to get into issues with it, but when it happens, in can be really infuriating and hard to debug if you don't know how containing blocks work
So that explains it, containing blocks... Thanks, Kevin. This fixed an issue I was having today.
the position fixed tip was amazing. sometimes i really did not understand why it was not working and i was like what is going on. thank youu, Kevin!!
You're the best! 8:51This is EXACTLY what I was doing. I had an idea of containing blocks, but I wasn't sure. Now I know it IS containing blocks. Thanks so much for this video!
At 04:50 I finally understood position: absolute to position: relative. Whew, thanks so much King :)
A good exercise is to position a container at various positions on the viewport.
Top left, top right, bottom left, bottom right and centre.
But not cheating with margins or anything like that.
Then add another container and try to position two containers.
Then three, and so on.
Great video! I still remember the frustration of the first time I crashed into the fixed position issue. I was working on a project where the design commanded the use a hamburger menu toggling a full-screen overlay on mobile, with the catch that the last item on the list was a highlighted button for the main CTA, and said button would be the only from the list that remain visible for wider viewports, fixed to the top right. Tried switching the button from its static position to a fixed one on wider viewports, but the transforms that toggled the overlay created a containing block, and the button end up nowhere to be seen xD
All the concept about the container block open my mind , thanks
Thank you. Every time I watch your videos I learn something completely new. Even if I thought I knew everything about some part of CSS.
its like this dude reads my mind. I was having trouble with this few days ago
omg Kevin, no words to describe you, and how much am learning from your channel, thank you thank you thank you
0:19 How did you know that position sticky has never ever worked on my projects and I have been painstakingly using JavaScript the whole time?
I avoid setting fixed widths and heights wherever I can. I really generally only use bits of padding here and there combined with either flexbox or grid plus some gap, depending on how insane the design is. If the content gets squished a bit width-wise, so be it. It's more natural for a web page to flow vertically/downwards anyway.
I sometimes use max-width, min-width, and min-height. Such as max-width: 72em; min-width: 9em; min-height: 3em;
If I'm feeling fancy, I can use a clamp() or something
collapsing margins are a huge annoy
i usually disable margins for everything and never use margins anywhere
we already have `gap` now and we can just add padding to parent
so margins are not needed much anymore
unless you are rendering a document like md file and stuff, what html designed for in the first place way way before
but now, margins are not needed by default for anything, it just creates confusion most of the time
if im gonna render something like an md file or an article and stuff i would just put it inside a shadow dom anyway with an embed component and it would just work as expected
the title explains my relationship with css pretty well
For some reason I've always had it in my head that positions were all relative by default. This may explain a lot of my confusion over the years.
I want to stick footer at bottom of page.
Case1: if content on page is less footer shift upword in viewport. I want to stick footer always stick at bottom even thought page length is less.
Bit different than what I looked at here, but I do have a video on that! ua-cam.com/video/yc2olxLgKLk/v-deo.html
Juste amazing content here. Exactly what I needed
Thank you. Am going to watch this a few times.
I always learn new things with Kevin, no matter how good I am with CSS, thanks Kevin ❤️🌹
Kevin thank,
all times , the best learn's
18:45
just yesterday I've used "backdrop-filter" and its broke everything, so I switched to do blur with ::before.
Now, I guess, I understand what was the reason for that behavior xd
Super high quality content Kevin. Thank you, best teacher ever
I'm new to front end and your videos really help. Thank you 💗
Hi, Kevin. Thanks for another great video. Is there a reason you did not use and aside for the sidebar?😁
Just putting together a fast example 😅
Hi, can you please do a video on the advantages of using BEM vs something like '.content .sub-component' etc? Seems to me you can just define what the role of each block is, and then target as appropriate via selectors?
I'm a total newbie at CSS but I have tons of experience writing code for myself but also debugging code that others have written.
To me, the advantage of BEM would be: A) if I'm writing code, it will be easier to remember what I called the class so I would not be constantly having to look up "what exactly did I call that thing?" B) if I'm looking at someone else's code, I would quickly figure out the strategy and then be able to mostly guess what a class is meant to do just based upon the name rather than having to go look it up constantly.
Generally, you want the "words" (the parts that make up a particular name in this case) of your "language" to be as minimal as possible so you can learn the entire language more easily. You want the "syntax" (the structure of you names) to be simple, logical, and concise so, again, it is easy to learn. Consistency is also going to play a major part in unburdening the mental load of "speaking" the language.
Its mostly for as projects scale and keeping everything at the same specificity level.
The issue often isn't that people don't understand the impacts of raising specificity with descendant selectors, but when you have a team of people doing stuff, sometimes things get a little messier, and maybe someone makes a .title that messes with some .component .title that wasn't really intended to, so by having .component__title, you know the styles are more isolated. It's more of a "if we do it this way, there is less chances of running into some stupid problem that's annoying to fix" than anything.
It's also just one approach, I personally think having some level of "nesting" with descendant selectors is fine, and can even help enforce proper markup.
i agree, you truly know how to TEACH! asante
Awesome tutorial as always. thank for it KP.
Kevin, could you please create a tutorial about how to make a multilabel responsive mobile first drop down navigation menu & then hover effect on laptop/desktop version? All of the tutorials in this topic on YT are desktop first approach.
Such an informative video, Kevin. Thank you! This is one of your best! ❤️
Kevin, that was an amazing Video. Thank you very much for making such a great piece of content. Your truly make the world a better place.
Amazing kevin thanks alot for sharing the important concepts for free.
Not sure if it gets the "closing the quote job" done the same way, however instead of `content: close-quote` with a `font-size: 0rem` perhaps `content: no-close-quote` is more "elegant"? :two-cents:
You are a great tutor ❤
15:42 "You also have the social sharing things that suck" 😂👌🏻✅
Very timely
A small question, just wonder how to put a close-quote directly after the content of a paragraph using a pseude-element ?
The goat doing goat stuff 💪
Hey Kevin, tthink you could do videos on a Figma alternative Lunacy? I have been wanting to use it, but I prefer video tutorials. I hope you will do a video on it.
Hey Kevin, great video!
At work we‘re only using scss by now, and I was just wondering why you aren’t? Do you have any specific reasons for that, because I think it’s just handier in every way.
Thanks in advance!
Why is the up arrow in the scroll to top button inside of its own span?
Thanks Kev! You make everything simple. Can you try making videos about solving my other life problems too?😅
If I want to learn something new every day I just watch your videos. Your range of knowledge is amazing. It's crazy how you can make CSS exciting. Well done man!!!
!! IF YOU HAVEN'T SUBSCRIBED YET. SUBSCRIBE NOW. The work Kevin puts into these videos is a lot of work. I am sure he enjoys making them, but it's still a lot of work. Not to mention he does it with us in mind. So subscribe for him. Doesn't cost anything so what will it hurt. Nothing.
Super helpful, thank you!
Great video Kevin! I’ve shared this with many of my colleagues.
I’ve experienced setting a CSS transform on a parent element causes a ‘position:fixed’ element within to start listening to the container context of that parent instead of the viewport. Is there any other way around this? - other than moving the element to a different part of the DOM?
CSS needs a "I really want that block to go here!" attribute.
perfect timing :)
Interesting, I didn't know about that strange behavior of fixed
Position sticky to me is the single hardest thing to use on complex sites in my opinion. It's so frustrating that I even use Javascript instead.
So position context for an absolute positionated element reletive to lets say , its relative positionatted parent is function of parent padding and element margins? Thank you!
I had started to positioning with other relative, absolute,fixed
I like the video. I hope my questions don't imply that I didn't...
So, position: fixed looks at the view port EXCEPT for case A, B, C, ... Fine. But:
A) Is there a reference to the complete list of exceptions?
B) Do you know the "logic" of why these exceptions were created? If it is looking at the parent element with on of these special cases, how can that be leveraged to do something that others could not be done?
Your course sounds like what I need. I'm going to check it out. CSS frustrates the @#$%!!!!!!! out of me. This helped although I've been listening to a lot of your other videos and some of these things have already been covered.
OH!!! One point. The way that you diagnosed the problem with position: sticky is super helpful. That is the type of things I need. Teach me how to fish (i.e. how to debug and efficiently find solutions on my own)... don't just give me fishes (answers to specific problems).
The why for the position fixed thing is, from what I understand, a side effect of being able to get those things to work as they create new layout contexts, which the browser needs to be able to do for those effects. There is a list on the MDN page. As for leveraging it to do something useful... I can't think of anything as hard as I've tried, lol
Hi Kevin, and thank u for the video. I'm struggling with some position:relative/absolute creating a little map with some dots inside.
The map has position relative and the 3 dots, has position absolute and some value in top and left for locate them in the correct city. In this type of work how can i achive the best responsivness?
What is an ancestor on CSS, also what is a father?
11:35 hahaha now *that* kind of hack reminds me of old school CSS. Better leave a comment in that code, 'cause surely coworkers will have no idea why it's there
To join the puns train... Now this is a lesson that's gonna stick to my brain, and put me in a good position relative to my work. This video was an absolute pleasure to watch. Thank you.
Also will-transform break fixed.
Danke!
Thank you so much!
Today I learned positioning tips but also.... you can just write "content: open-quote" in your CSS for special quotes instead of using an SVG????
is there a way to specifically set a containing block from a children?
I want you to be my mentor, Kevin😁
Wouldnt this be much easier with using flex (display flex)
The fact you didn't highlight the entire H3 and then just left it like that for ages set off my OCD.
Sorry about that 😅
🤣«that social sharing thing that sucks!» 👍
plz do provide source code it really help the beginer
Audio was a little echo-y this video
CSS is easy. Then you watch Kevin Powell. Then you see how easy CSS is and shouldn't be ignored (in the name of "not real programming").
what's the point of still using base css when tailwindcss is undoubtedly more performant?
1. To use Tailwind CSS, you need to understand CSS.
2. Not everyone likes it.
3. Tailwind CSS cannot be more performant than CSS because Tailwind CSS IS JUST CSS!!! Perhaps you meant JIT compilation and class reusability.
Yeah this is like saying “why do I need to read and write when I have words”
And as for performance, yeah Tailwind isn’t more performant, it’s just CSS. If you’re talking about a large scale production application… maybe? But I’m still not convinced that there are any data savings by taking clutter out of the style sheet and shoving them into the markup.
Is it though? They're just using purgeCS, which anyone can use. As for repeated CSS, once things are gzipped, you probably won't really see a difference anyway, and any decent host is going to gzip automatically.
My website, while simple enough, is only shipping 4kb of CSS to the user. Even if using Tailwind would cut that by 50% (which I doubt it would), that's 2kb of savings. I could think of *a lot* of other things that would give me a bigger benefit.
Let's bring things up to a bigger site, and say I have a 100kb CSS file (that's what tailwindui.com has), gzipped it's down to 18kb, which is what the user downloads. Even if I recreated their site without using Tailwind and had a 200kb or 300kb file, I'd only be shipping about 30-40kb to the user, and probably less than that since gzipping tends to have bigger effects on larger files (since there is more repeated code, which is what gzip is amazing at compressing). If you're worried about 10-20kb optimizations on a CSS file, you're down to the real nitty-gritty and probably wasting your time.
I'm not saying this to poop on Tailwind. I get why people like it, and that's fine. I just don't like hearing about how it can help with performance, because I think there is a lot of disinformation out there on that topic.
And can someone please correct me if I’m wrong: I’ve observed tailwind doing some client side script processing to make the class names do some funky stuff they normally wouldn’t be able to do. If true, tailwind is certainly slower than CSS because it’s doing some JavaScript execution which CSS obviously does not
16:12
Putting position absolute on inline elements behaves different
Like checkbox
Once something is position: absolute, the display property sort of goes out the window, and it's pulled out of the flow anyway... I can't really think of a huge impact that it would have though, care to elaborate?
@@KevinPowell
When I was trying to create a custom checkbox
Using opacity 0 to make it not visible but still on the page
And together with position absolute, the checkbox no longer takes space.
Even when position relative is not declared on its parent or any containing block. The checkbox is still within its original containing block if you increase the opacity a little to see it.
I think position absolute behaves different for input elements or inline elements in general.
@@emmanuelxs6143 Would be nice to have an example of that.
@@Laura69 yeah
What about when the parent has an overflow:hidden when using position sticky?