
Positioning in the web explained with GIFs - sandijs
http://blog.froont.com/positioning-in-web-design/
======
barkingcat
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.

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

~~~
sandijs
Damn typos. Thanks!

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

~~~
jordanlev
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...](http://www.barelyfitz.com/screencast/html-
training/css/positioning/)

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

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

~~~
nileshtrivedi
I would have like to see position:sticky.

~~~
freshyill
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)

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

------
devindotcom
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
Good point! It actually would be pretty cool also have a working example. I'll
keep that in mind for the next posts.

------
Mahn
> 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
It works well on some sites and badly on others. Either way its still
important to know how to do it.

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

~~~
steveax
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
Thanks! Fixed!

------
guilbep
Too bad the animations are not in css :D

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

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

