Positioning in the web explained with GIFs | Hacker News Reader

Positioning in the web explained with GIFs

blog.froont.com

90 pointssandijs25 comments

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.

Most of the "Don't" points use extremely unclear wording, too. Example: "DON'T: Avoid text being on top of that clickable stuff as it becomes unclickable..." Uh, don't avoid that? A couple are also "DON'T: <statement of fact>" which is confusing. Given the audience this is aimed at, those DON'Ts are probably doing more harm than good.

and some that a spellchecker may not catch, such as "brake" instead of "break"

Damn typos. Thanks!

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

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

Here is the best explanation I've ever seen (a bit more fleshed out than the OP): http://www.barelyfitz.com/screencast/html-training/css/posit...

And here's another good one that is specific to layouts: http://learnlayout.com/display.html

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.

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

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

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

I appreciate the effort, but I found these animated illustrations confusing. Which part is what? On which sides are they bound? How are they attached? How do they interact? When are the shapes "scrolling" and when are they animating themselves? I like seeing the concepts in action, but I came away with little idea of what the concepts were other than that they were different - well, little more than I started with. More size, context, and interactions would make this vastly more educational, I think.

Good point! It actually would be pretty cool also have a working example. I'll keep that in mind for the next posts.

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

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?

Yes, it's absolute relative to its nearest positioned ancestor.

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!

Too bad the animations are not in css :D

Or SVG, which would allow for much easier handling than CSS. :-p

Hi Tom A, Danish here :) Good luck and all the best!

Reply on news.ycombinator.com