Positioning in the web explained with GIFs • Hacker News Board

Re: Positioning in the web explained with GIFs

#11

Post by steveax » Thu, Jan 22, 2015, 4:52 PM UTC

nsxwolf wrote: post #6

I 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?

And the text is just wrong:

"The tricky part is that it will be absolute to the parent element that has a position of Relative or Fixed."

Should be: "relative, absolute or fixed" (or more simply: position other than static")

Re: Positioning in the web explained with GIFs

#12

Post by sandijs » Thu, Jan 22, 2015, 5:05 PM UTC

techtalsky wrote: post #3

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

Thanks! Margins, floats, inline blocks could be something of a separate post or two.

Re: Positioning in the web explained with GIFs

#13

Post by sandijs » Thu, Jan 22, 2015, 5:07 PM UTC

pumpernick wrote: post #7

It'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…

I totally agree! And half of them are hacks. That scares way too many people away from designing with code!

Re: Positioning in the web explained with GIFs

#14

Post by sandijs » Thu, Jan 22, 2015, 5:09 PM UTC

steveax wrote: post #11

nsxwolf wrote: post #6

I 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?

And the text is just wrong: "The tricky part is that it will be absolute to the parent element that has a position of Relative or Fixed." Should be: "relative, absolute or fixed" (or more simply: position other than static")

Thanks! Fixed!

Re: Positioning in the web explained with GIFs

#15

Post by pmck91 » Thu, Jan 22, 2015, 5:11 PM UTC

Mahn wrote: post #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.

It works well on some sites and badly on others. Either way its still important to know how to do it.

Re: Positioning in the web explained with GIFs

#16

Post by barkingcat » Thu, Jan 22, 2015, 5:12 PM UTC

It's a great visual explanation, but the page is full of typos and spelling mistakes that can easily be caught by default spellcheckers.

I can issue a pull request with the corrections marked up if you have a git repo somewhere.

Unfortunately, the textual errors are detracting from the great message of the page.

Re: Positioning in the web explained with GIFs

#17

Post by nileshtrivedi » Thu, Jan 22, 2015, 5:21 PM UTC

techtalsky wrote: post #3

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

I would have like to see position:sticky.

Re: Positioning in the web explained with GIFs

#18

Post by freshyill » Thu, Jan 22, 2015, 5:25 PM UTC

nileshtrivedi wrote: post #17

techtalsky wrote: post #3

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

I would have like to see position:sticky.

It'll be great when the time comes, but it's definitely not ready for production: http://caniuse.com/#search=sticky

Re: Positioning in the web explained with GIFs

#19

Post by techtalsky » Thu, Jan 22, 2015, 5:33 PM UTC

sandijs wrote: post #12

techtalsky wrote: post #3

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

Thanks! Margins, floats, inline blocks could be something of a separate post or two.

That would be wonderful. I have several friends who really struggle with CSS right now, and this kind of illustration is super useful. Floats are such a fundamental and confusing CSS concept. Any illustration of it would be useful.

Re: Positioning in the web explained with GIFs

#20

Post by jordanlev » Thu, Jan 22, 2015, 5:57 PM UTC

techtalsky wrote: post #3

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

This is a great explanation of using floats for layout: https://dl.dropboxusercontent.com/u/4374976/css.html