Positioning in the web explained with GIFs
blog.froont.com
Positioning in the web explained with GIFs
1–10 of 26 posts
Re: Positioning in the web explained with GIFs
#2Hi Tom A, Danish here :) Good luck and all the best!
Re: Positioning in the web explained with GIFs
#3Really cool way of visualizing some CSS concepts but I would have loved to see "float". I think that's the one that gives people the most trouble. I think it would probably take several gifs to illustrate though. I do appreciate that the author kept his presentation very simple.
Re: Positioning in the web explained with GIFs
#4Too bad the animations are not in css :D
Re: Positioning in the web explained with GIFs
#5Too bad the animations are not in css :D
Or SVG, which would allow for much easier handling than CSS. :-p
Re: Positioning in the web explained with GIFs
#6I didn't understand the absolute gif. They said use it for logos that need to appear at the top of the page, but then you see it scroll right off the screen with the rest of it.
Are they saying, it's absolute in reference to the yellow box it's a child of, and it's only scrolling up because the yellow box is?
Re: Positioning in the web explained with GIFs
#7It's a digestible introduction, but in the real world you'll find that there's a lumbering iceberg underneath.
Display, alignment, justification, relative parents, stacking contexts, flow, negative margins, flexbox, transform... all of these interact in... let's say interesting ways, and not consistently across browsers.
I wish CSS positioning could be explained with a few GIFs, but moving outside the playground you quickly realize it can't.
Now that the DOM and JS are mostly solved problems, I'd like to see browser vendors seriously tackle CSS rendering so it can be this simple.
Re: Positioning in the web explained with GIFs
#8> DO: Navigation that is always visible on the top of the screen? Yes!
Is this really a good practice? I'd personally avoid it unless there's absolutely no other way of accomplishing whatever you are trying to do in terms of UX.
Re: Positioning in the web explained with GIFs
#9Note that relative positioning does not just create a stacking context, it also allows you to use the `left` and `top` properties to offset the element from its static position.
Re: Positioning in the web explained with GIFs
#10I didn't understand the absolute gif. They said use it for logos that need to appear at the top of the page, but then you see it scroll right off the screen with the rest of it. Are they saying, it's absolute in reference to the yellow box it's a child of, and it's only scrolling up because the yellow box is?
Yes, it's absolute relative to its nearest positioned ancestor.