CSS position deep dive

[@aeaeaeaeoaeaeaeaeae]

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

[@SjarMenace]

Fr brooooo

[@jon1santos]

man, that align-self start to fix the sticky position is blowing my mind

[@MarkWalsh-gc]

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

[@itsgojoverfr]

That's what im talking about, that's why he's the GOAT! THE GOAAT!!!!

[@kreynusr4242]

The man, the myth, the legend

[@victornunes5888]

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!

[@nics5706]

Love how simple the explanation is and yet in depth in this tutorial. Really easy to understand. Thanks!

[@tomaz-laurensoft]

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 🎉😊😊

[@DieEneVent]

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.

[@KevinPowell]

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 😅

[@DieEneVent]

​@@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.

[@Stoney_Eagle]

I call him the king of CSS 😂

[@ruthy08]

I also send students here for deep diving into CSS. He's our unofficial textbook. 😅

[@millos0116]

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!

[@AbdielPeguero-ho8dd]

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!

[@cantcode1001]

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!

[@jbc8220]

Your explaination is clearer than my eye sight, Thank youu

[@clevermissfox]

22:09 never would’ve figured this out about sticky X display: flex w stretch. Great tip!

[@clevermissfox]

Omg the filter on the parent makes it relative? And transform?? Wow

[@MichaelJoseph83]

Video barely a min old bro

[@EyadAlkhalidy]

@@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.

[@KevinPowell]

Patron's get early access :D

[@clevermissfox]

@@MichaelJoseph83 bro get on that patreon and you too can mystify people with your comment 💜

[@justivo]

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!

[@troublesum]

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.

[@ronniejunior8590]

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

[@caesarbala]

While seeing title I was hesitant there is another repeated content about position but it was new thing thanks for share guruji ☺️

[@ogbuleo2048]

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

[@atulkadyan1303]

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

[@CommDao]

This reminded me I knew more than I thought-- and that's a huge help when it's so easy to get overwhelmed! 🙏

[@youjean83]

I'm not too much into CSS, but I simply love the content which you deliver.

[@grasshopperweb]

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

[@boukrimohammed]

finally a worthy video!!! my positioning willl become legendary

[@joshuaoseiawuah1157]

thank you Kevin!!!! i have always had issues with position. what a relief 😅

[@sharkinahat]

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'.

[@ApurvaKashyap-kj6qz]

how this video stays played even when u minimise youtube app ,without any premium subscription of youtube while no other video has this thing

[@Akimb321]

I guess the video is... 🥁🥁🥁 position absolute

[@deadlyecho]

Bug maybe ?

[@neodevils]

Wait how tf, yeah its weird lmao

[@subaash1706]

I thought it was happening only to me 😶‍🌫️

[@d.minkov]

Bug because of the merch

[@professor7698]

really amazing .. all of those confusion in one video is solved .. wow amazing .. great

[@anuzpandey3326]

The best video on positioning elements. Thank you soo much.

[@lucienchu9649]

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 :)

[@potrosanjuan]

We ALWAYS learn something new from Kelvin, GOD of CSS

[@valentincamus8343]

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.

[@fvgoya]

It’s amazing the amount of knowledge we can have from your content. Thank you very very much for doing what you do.

[@StephenMoreira]

Very nice, I feel like I forgot about the tradeoffs of postiion sticky and fixed so this was a great refresh.

[@khalidiqbal7065]

Great explanation sir... Learning things from you is always awesome... Very Informative video

[@PerryCodes]

This is good stuff. More deep dives, please!

[@LePhenixGD]

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

[@KevinPowell]

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 :)

[@justingolden87]

I learned this one the HARD way a few months ago

[@Stoney_Eagle]

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.

[@carstenaltena]

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!

[@JackPackTV]

Sticky seems very cool! Thanks for explaining!

[@EyadAlkhalidy]

This great lesson came just in time for me. Thanks Kevin!

[@nekohz]

filter/contain: layout can also break display: fixed (but not for sticky), not only for absolute.

[@leader7700]

Спасибо6 онь дельно, многие моменты как раз не мог понять поведение - а сейчас встало на свои места!

[@larbesabdellah7079]

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 ❤

[@mikoajp.5890]

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.

[@ЛеонидСеменов-г2и]

Brilliant. Thank you so much for a clear explanation

[@katlegomonama5824]

I was waiting for this day 4 a long time!

[@Rhysling2]

Thank you, Kevin!

[@NA-Zerosteel]

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.

[@Wynorrific1]

great video Kevin Powell. Thank you

[@ionutpotolea2922]

One very important gotcha with position sticky is it doesn't work if any ancestor has overflow:hidden on it.

[@Techvideos-q7u]

Thank you kelvin, you always the Best 🏆

[@jearsh]

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!

[@spejr879]

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. 👍🏼

[@JosephCodette]

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).

[@cavemutt]

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 !

[@KevinPowell]

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

[@tbone587]

Very useful info, thank you!

[@andreyklepikov7084]

Great video. You are a very good tutor!

[@Czulu]

excellent explanation

[@aram5642]

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]

[@RaveKev]

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.

[@ossivaldo]

Just awesome, love it! 🎉

[@xellestar]

One way position still throws me off at times is how it interacts with overflow and its various related rules and potential values

[@LastRoseStudios]

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.

[@ohkalos]

Great tutorial! Thank you!

[@MichaelJoseph83]

I feel this is something many people still get confused

[@DrugedSheep]

You haven't mentioned that position:absolute also establishes a new containing block just like position:relative, which makes nesting absolutely positioned elements possible

[@KevinPowell]

I do mention that any position, other than static, does that at one point in the video :)

[@FunDumb]

I've dreamt of this video. 😊

[@bd.design]

just in time👍👍

[@Pareshbpatel]

A great tutorial on positioning in CSS. Thanks, Kevin. {2024-05-12}

[@OCEMTechZone]

Great one🎉

[@this-is-clem-fandango]

perfect timing for this video to come out for me lol

[@Nothing_Else_Matters]

thanks a lot for that vids and very good courses .... big thumb up

[@DavidLewis-i6h]

Rippin Plain

[@timiade8108]

Thanks

[@Waxaranai]

i need this!

[@MarkoTH000]

top content

[@EdithMark-q8i]

Stanton Shoal

[@Mo0n1111]

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); }

[@JoshuaMusau]

love it

[@SalehHajiEsfandiari-u9c]

thanks bro❤❤

[@julio3592]

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...

[@ZillionFundz]

Thanks for the video. Please what screen Recorder App do you use?

[@SamCrowetheCreativeCrowe]

Thanks!

[@KevinPowell]

Thanks so much Sam!

[@luigidabro]

I always have a problem with position sticky on the sidebar, as I can no longer move it sideways out og the viewport

[@michaelengelby732]

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?

[@bobhearinger]

Next the non beginner friendly position: fixed and width?

[@KevinPowell]

I looked at it in this one, the Technique #4 in the chapters/timestamps - kzbin.info/www/bejne/bmi8fnaqqKeiea8 - 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

[@pajeetsingh]

Web Dev simplified vs Kvein Powell, who wins?

[@timothyanderson2166]

Is there ever a practical scenario when you would use position relative with insets instead of a translation?

[@_Squiggle_]

Why was the primary header not aligned to the top of the page when he first added position: fixed?

[@beluga_0007]

hurray🎉🎉

[@thomasdinh2k]

Hi, it would be helpful if you also provide the link to your demo, thanks so much!

[@arjunhadke1113]

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?

[@Doshinkyo]

still confused and cant do what I want to do

[@pali.paloma]

Thank you soooo much! I wanna be your friend 🥹

[@Showbear1986]

Isn't there also an issue with position: sticky if the containing block has not the overflow default attribute?

[@ionutpotolea2922]

indeed if any ancestor of the sticky positioned element has an overflow:hidden on it, position:sticky stops working.

[@cobratst]

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?

[@KevinPowell]

Ah, right because it's going in the natural tab order. Not sure there's much we can do there tbh

[@swagmanswag]

Great course, but what do you mean by "z-index land"? Isn't it only for stacking context ?

[@KevinPowell]

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 :)

[@fendularatsq2317]

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]

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).

[@fendularatsq2317]

@@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

[@victornunes5888]

@@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.

[@shogunkodogun]

The guy she tells you not to worry about

[@KB04]

Hey, have you ever done a deep dive on display?

[@KevinPowell]

Sort of with this one: studio.kzbin.infoty4lnEUy7SY/edit