jQuery UI position function problem when the parent div is not visible on the screen

Question

I'm facing a weird problem with jQuery UI Position function.

There is a parent div, bigger then screen's height and another small div inside it. My function tell to the small div be positioned in the bottom of it parent.

When the bottom is visible, everything is ok, but when the bottom is not visible because of the window size, the position function doesnt work.

Follow a draw to make easy understanding...

And the function Im using is.

    $("#_GREEN_div").position({
        of: $("#_RED_div"),
        my: "left bottom",
        at: "left bottom"
    });

EDIT: JSFiddle - jsfiddle.net/Steve_Wellens/5Zdac (thanks Steve, great tool)

Answer 1

I think you should use collision attribute also:

$("#_GREEN_div").position({
    of: $("#_RED_div"),
    my: "left bottom",
    at: "left bottom",
    collision: 'none'
});

This way "MY DIV" will always be at the bottom left.