Say you want a graphic to break past the bounds of your layout - or, in the test below, you want to overlay the header image. In the design below, I proposed an endlessly scrolling scene of real customers, with the logo and header overlaid. And this design "breaks" past the layout margins, overlaying the layout with a soft drop shadow specific to the graphics.
I've fought with positioning elements in ATA; generally, you want a container with relative positioning, and then set your overlaid content to absolute (and maybe use a z-index). This takes the content out of the page flow, where it won't push other elements down or over. I could never get it to function right in ATA, until this occcured to me:
Go to theme options: Style and Configure Layout.
In the "Layout Container Style" field, add this:
position: relative;
Then you can add your overlaid art (theme options - HTML CSS Inserts - "body top" works well) and position it via CSS inserts. In this case, it's a transparent PNG, so the soft shadows overal the scrolling photos and the page background.
I've had no problems with any site by adding "position: relative" to the layout container (though I haven't tried it with percent-sized layouts, only fixed). In this case, the layout is 800px, but the top of the design seems to "break" past those bounds, while overlaying the header.
Since the images above endlessly scroll across (it's actually 3 images for faster loading, with the far left and far right setup to "match" with no break) I didn't use "%image" in the header setup; instead I coded it into header.php. CSS Inserts "body top" may have worked as well.
Give it a try - I find it's very easy to "design for wordpress" and think "header/column/center/column", but stuff like this can break you out of a design rut. I have many peers and clients who say, "no way is that wordpress!" I just point them to Atahualpa...
