Why position of div is different when browser is resized to a certain dimension?

See working example at http://jsfiddle.net/xqwqH. I have a green div inside a red div. Green div is positioned usin开发者_JS百科g jQuery postion(). If I resize the browser to where the bottom edge is inside the green square and refresh the page (see example below), the green square moves to a different location. I thought it was a bug in the browser but when it worked the same way in IE8, FF and Chrome, it seems this behavior is normal.

Why does the div change position when browser window was resized in that manner?

Try adding collision: "none" to the list of arguments for position. i.e.

$(document).ready(function() {
         $('#div1').position({
             my: "left top",
             at: "left top",
             of: $('#wrapper'),
             offset: "40 10",
             collision: "none"
         });
 });

See the jquery documentation:

http://docs.jquery.com/UI/Position