How Position Absolute Works in CSS Grid

Рет қаралды 1,945

Күн бұрын

A brief, hands-on guide to using absolutely positioned elements with CSS Grid, along with a practical use-case.
🔗 Links
Demo: codepen.io/ZoranJambor/pen/zY...
Advanced Positioning in CSS Grid: • Advanced Positioning i...
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS ...
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com/
🏷️ Use coupon code KZfaq15 to get an additional 15% off on the already discounted, pre-launch price.
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
📖 Chapters
00:00 Intro & demo setup
00:27 How “position: absolute” works
02:31 How grid element behaves with “position: relative“
03:09 How a grid-positioned element behaves with “position: absolute”
04:25 Use-case for absolutely positioned elements on CSS Grid
05:01 Recap & conclusion
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #cssgrid

Пікірлер: 30

11 ай бұрын

1:36 Not the viewport, but the initial containing block. position: absolute → ICB position: fixed → viewport That is why when you scroll the page, absolute elements scroll out of view, while fixed elements stay in the viewport.

@ahmad-murery 11 ай бұрын

"The ICB has the dimensions of the viewport (for continuous media) or the page area (for paged media)" _-- MDN/Containing_block_ So, I think you're both right

11 ай бұрын

@@ahmad-murery MDN is not entirely correct. The ICB has the “small viewport size”, and the layout viewport has either the “small viewport size” or the “large viewport size”, depending on whether the browser’s toolbar is present in the mobile browser. In other words, the ICB and the layout viewport have the same size only sometimes, not always. Therefore, it’s incorrect to say that position: absolute elements are relative to the viewport. They’re just not. And it’s not just the size. The ICB and layout viewport also don’t have the same position most of the time. So both the size and the position of the ICB and viewport is not the always the same.

@ahmad-murery 11 ай бұрын

@ Yes I agree with you, but in the context Zoran was explaining this, I think that special case was hit. I like this kind of discussion, Thanks

11 ай бұрын

@@ahmad-murery position: absolute elements are not positioned relatively to the viewport, but to the ICB. That is a fact. Why can’t we just agree on the facts and end it there? Why do we have to have an entire discussion about it and introduce additional, unnecessary details? The context does not matter. A fact is a fact regardless of context.

@CSSWeekly 11 ай бұрын

Thank you so much for clarifying this, Šime! 🙏 That was a poor choice of words, I was speaking loosely, focusing on visuals to make topic more approachable-not a good idea for a technical concept, especially as it's just wrong. 😕 I wasn't aware of the "initial containing block" term, and that's a fantastic reminder that I can still learn a lot about the most basic CSS concepts. 🙂 And thanks again for correcting me, Šime! 🙏

@AjajRajguruAJ 11 ай бұрын

Thanks for the awesome insights. Keep up your good work.

@StevieB86 11 ай бұрын

I'll second this. His banner is brilliant too!

@CSSWeekly 11 ай бұрын

Thank you so much for watching and for your kind words, Ajaj! It means a ton! 🙂

@CSSWeekly 11 ай бұрын

I'm thrilled to hear you like the banner! 🙂

@MusicalMII 11 ай бұрын

Thank you for your videos

@CSSWeekly 11 ай бұрын

Thank you, my friend! 🙏❤️

@thedacian123 11 ай бұрын

I was in doubt about position absolute in a css grid,so the absolute position is relative to element's grid area not all grid box,correct? Thank you!

@CSSWeekly 11 ай бұрын

Yes, Alex, that's correct. 🙂 If you add "position: relative" to the grid container, all grid items will be positioned within their grid areas when you're using "position: absolute" 🙂

@love4ever026 11 ай бұрын

watched 2 videos today, love ur content.. btw have y played farcry 3 game? ur personality matches with vaas haha my fav villain in the game. subscribed u today

@CSSWeekly 11 ай бұрын

Thanks so much; this means a lot! 🙏 I didn't play Farcry. And I’m not sure I feel good hearing that my personality matches a villain! 😂

@love4ever026 11 ай бұрын

didnt mean to disrespect u broda, the villain i am talking about is loved my every farcry players hehe. u can watch the short clips of farcry vaas when u get free time@@CSSWeekly

@CSSWeekly 11 ай бұрын

@love4ever026 I didn't take it as disrespectful at all. 🙂 It's one of the most interesting and funny comments I got-thanks! 🙂

@StevieB86 11 ай бұрын

It took me a good few weeks to get used to the position property. Confusing as hell when you've never used CSS before.

@CSSWeekly 11 ай бұрын

Yes, positioning static/relative/absolute is one of the more difficult concepts to grasp when starting with CSS. 🙂 Do you find any other CSS concepts particularly challenging to understand?

@StevieB86 11 ай бұрын

@@CSSWeekly I'm glad you've asked, actually. I tried learning about the ::before / ::after pseudo elements last week but didn't get very far. Not quite figured out their purpose yet, but I see them used everywhere. If you've got any videos on this, I'm happy to watch them. Cheers!

@CSSWeekly 11 ай бұрын

Thanks for the reply, Steven. 🙏 I can see how understanding pseudo-elements can be challenging, but sadly, I don't have anything on the subject. 😞 But this certainly seems like an interesting topic that would be useful to people, so I'll add it to my list of potential videos to create. 🙂 Thanks again; I really appreciate your feedback!

@ahmad-murery 11 ай бұрын

I may be wrong but, does this mean that a grid area has an implicit position: relative Thanks Zoran

@CSSWeekly 11 ай бұрын

Thanks for the question, Ahmad. 🙂 No, it doesn't have an implicit position relative. You must manually add "position: relative" to the element that has "display: grid"; otherwise, grid items will be positioned within the closest parent with position relative or the page. 🙂

@ahmad-murery 11 ай бұрын

@@CSSWeekly That's good, it's better to keep things behaving the way they should

@CSSWeekly 11 ай бұрын

Indeed, Ahmad. 🙂

@ScriptRaccoon 11 ай бұрын

Good video! Unfortunately, still find the zoom effects incredibly distracting. :/ To explain a bit more: the font is already quite big, the text can be seen very clearly. Due to the zoom effect, my eye has to "follow the effect" instead of focussing on the actual content. Also, my eye constantly loses focus of the context of the code / element. The zoomed content overlaps part of the context (see for example 2:02). Sometimes it even "breaks" the layout (see for example 2:27). And above all, the non-zoomed part gets a backdrop filter. Too much is going on here.

@CSSWeekly 11 ай бұрын

Thanks so much for your thoughtful feedback, my friend! 🙏 I will revisit this and ask for more feedback. The last time I asked, the feedback was overwhelmingly positive, but I still hate that some people (like you) find it distracting. 😕

@unus55 11 ай бұрын

Please don't dim the screen to highlight something. It is so annoying while watching lights ON :( I might be reading something from the screen, then those texts becomes dim when you are trying to highlight something .

@CSSWeekly 11 ай бұрын

Thank you so much for your thoughtful feedback! I didn't realize this might be the problem. Highlighting and dimming is something I will try to adjust a bit to make it a bit less obtrusive and more readable. 🙂 And again, I appreciate you taking the time to let me know about this. 🙏