14 ms·

Positioning in the web explained with GIFs

90 points by sandijs 12y ago

Nemant 12y ago
Hi Tom A, Danish here :) Good luck and all the best!
techtalsky 12y ago
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.
- sandijs 12y ago
  Thanks! Margins, floats, inline blocks could be something of a separate post or two.
  - techtalsky 12y ago
    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.
- nileshtrivedi 12y ago
  I would have like to see position:sticky.
  - freshyill 12y ago
    It'll be great when the time comes, but it's definitely not ready for production: http://caniuse.com/#search=sticky http://caniuse.com/#search=sticky
- jordanlev 12y ago
  This is a great explanation of using floats for layout: https://dl.dropboxusercontent.com/u/4374976/css.html https://dl.dropboxusercontent.com/u/4374976/css.html
guilbep 12y ago
Too bad the animations are not in css :D
- Frozenlock 12y ago
  Or SVG, which would allow for much easier handling than CSS. :-p
nsxwolf 12y ago
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?
- spdustin 12y ago
  Yes, it's absolute relative to its nearest positioned ancestor.
- steveax 12y ago
  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")
  - sandijs 12y ago
    Thanks! Fixed!
pumpernick 12y ago
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.
- sandijs 12y ago
  I totally agree! And half of them are hacks. That scares way too many people away from designing with code!
- jordanlev 12y ago
  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/positioning/ 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 http://learnlayout.com/display.html
Mahn 12y ago
> 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.
- pmck91 12y ago
  It works well on some sites and badly on others. Either way its still important to know how to do it.
ender7 12y ago
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.
barkingcat 12y ago
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.
- hamburglar 12y ago
  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.
- blueblob 12y ago
  and some that a spellchecker may not catch, such as "brake" instead of "break"
  - sandijs 12y ago
    Damn typos. Thanks!
devindotcom 12y ago
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.
- sandijs 12y ago
  Good point! It actually would be pretty cool also have a working example. I'll keep that in mind for the next posts.

90 points by sandijs 12y ago

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

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.

sandijs 12y ago
Thanks! Margins, floats, inline blocks could be something of a separate post or two.
- techtalsky 12y ago
  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.
nileshtrivedi 12y ago
I would have like to see position:sticky.
- freshyill 12y ago
  It'll be great when the time comes, but it's definitely not ready for production: http://caniuse.com/#search=sticky http://caniuse.com/#search=sticky
jordanlev 12y ago
This is a great explanation of using floats for layout: https://dl.dropboxusercontent.com/u/4374976/css.html https://dl.dropboxusercontent.com/u/4374976/css.html

guilbep 12y ago

Too bad the animations are not in css :D

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

nsxwolf 12y ago

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?

spdustin 12y ago
Yes, it's absolute relative to its nearest positioned ancestor.
steveax 12y ago
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")
- sandijs 12y ago
  Thanks! Fixed!

pumpernick 12y ago

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.

sandijs 12y ago
I totally agree! And half of them are hacks. That scares way too many people away from designing with code!
jordanlev 12y ago
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/positioning/ 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 http://learnlayout.com/display.html

Mahn 12y ago

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

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

ender7 12y ago

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.

barkingcat 12y ago

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.

hamburglar 12y ago
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.
blueblob 12y ago
and some that a spellchecker may not catch, such as "brake" instead of "break"
- sandijs 12y ago
  Damn typos. Thanks!

devindotcom 12y ago

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.

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