Positioning in animation is always tricky, but trying to design a website/animation that looks perfect from a widescreen monitor down to a smartphone is downright maddening sometimes.
Have you experimented with any SVG animation yet?
We're switching nearly all of our animations to SVG . The beauty (beyond the obvious scaling of the vectors) is you can set up an entire 'stage' in Illustrator or any other vector based program with all your elements at their desired starting (or ending) position and animate them with GreenSock while having complete control over the CSS. Each element is sitting at it's own zero/zero coordinates so if you move one of the items to {x:400} it will move 400 units from it's current position. The really awesome part is that when the SVG scales down for smaller screens, that tween doesn't need to change - all the animations stay in proportion. Just start at the largest size you'll need and work from there.
Quite often, I'll start with a nice size document - say 1600px by 1000px and layout all my vectors on that stage to set the scene. I then bring that into my HTML via an inline SVG and set all my GreenSock tweens. Set your main SVG to 100% width and everything scales down beautifully. Another big plus to an SVG workflow is adding new elements after you've started your animation. Simply go back to your original vector illustration and add your new items anywhere on that stage you'd like them to start. After that, simply save a new SVG with only that element selected (and a background rectangle the same size as your stage), cut/paste the new SVG into your existing HTML and presto - its now part of the master SVG.
To me, the whole process is a lot like making a Flash animation. You just have to wrap your head around the viewBox of the SVG. Once that makes sense, you load up your GreenSock, layout some SVGs, grab some snacks and create something awesome. Honestly, between GreenSock and SVGs, I'm like a kid in a toy store - the possibilities are endless.
Best of luck to you.