Add option to change alignment axis

[icmdaf]

Currently using no-overlap and horizontal-align/vertical-align on the blue box, targeting the orange box results in the following layout:

There is currently no way to arrive at the red outlined position, where i.e. horizontal-align="left" would mean "put me to the left of the target", not "align the left edges".
This mode would be useful for i.e. desktop popup submenus where the trigger item would be the target and the submenu would be aligned dynamically like the red box.

[valdrinkoshi]

Currently the behavior explicitly prefers to align it on the vertical axis, overlapping only the horizontal part (as noted in this comment https://github.com/PolymerElements/iron-fit-behavior/blob/master/iron-fit-behavior.html#L584)
Undoubtedly we need to provide more documentation to explain how the different combinations of these properties work together. A picture like yours would be really helpful I believe :)
There are some errors in that picture though. This is the way it works: say you have align top-left and noOverlap; noOverlap either pushes the element forward (not backward) OR downwards (not upwards) so that the target doesn't get overlapped. If both options are good candidates (aka they don't cause cropping), the vertical noOverlap is preferred.
Your request is that the horizontal noOverlap should be preferred, right?

[valdrinkoshi]

Another example for the sake of completeness: say you have align bottom-right and noOverlap; noOverlap either pushes the element backwars (not forward) OR upwards (not downwards) so that the target doesn't get overlapped.

[hzmsrv]

we just want noOverlap