Jquery UI position: wrong top offset

Question

When using bigger top offset with jquery ui position method, I get wrong results.

It's hard to describe but I've created a fiddle here:

http://jsfiddle.net/hGjMx/1/

As soon as the top offset reaches a certain value, the offset result gets inverted.

Just a snippet of the JSFiddle:

$(".element").position({
        my: "left-228 top-" + topOffset,
        at: "left top",
        of: ".baseElement"
    });

On my website it's perfectly works in google chrome using the full screen mode. On the JSFiddle it sometimes works based on the size of the JSFiddle css window...

Any help is much appreciated.

Answer 1

It's because of the fitmode. The jQuery UI position utility has an intelligent collision detection system that will position the element based on its proximity to the edges of its container, so once it gets too close to one edge, it will flip the position (which is why you see the inversion) to try and fit it better

See the collision option in the API docs