relative position test

-50% -50%

HTML

<p id="mouse-pos">Mouse Offset:<span></span></p>
<label for="left">Left</label>
<input type="text" id="left" value='-50%'/><br/>
<label for="top">Top</label>
<input type="text" id="top" value='-50%'/><br/>
<div id="map" style="position: relative; top: 10px; left: 10px; background-color: gray; width:400px; height: 400px">
</div>

CSS

.overlay, overlay2 {
    border: 1px dotted red;
}

.overlay div {
    border: 1px solid green;
}

JavaScript

$.widget("my.overlay", {
    options: {},
    widget: function() {
        return this.overlayElement;
    },
    _create: function() {
        var self = this,
            options = self.options;

        //console.log('overlay created', options);
        self.element.addClass('overlay').css({
            position: 'absolute'
        }).offset(options.position);

        // create overlay object div
        self.overlayElement = $('<div></div>').css(options.css).appendTo(self.element);
    }
});

$.widget("my.overlay2", {
    options: {},
    widget: function() {
        return this.overlayElement;
    },
    _create: function() {
        var self = this,
            options = self.options;

        //console.log('overlay created', options);
        self.element.addClass('overlay2').css({
            position: 'absolute',
            bottom: 0,
            left: '-50%'
        }).css(options.css).offset(options.position);
    }
});

$('#map').mousemove(function(e) {

    $('#mouse-pos span').html((e.pageX - $(this).offset().left) + "," + (e.pageY - $(this).offset().top));

}).click(function(e) {

    $('<div id="new"></div>').overlay({
        position: {
            left: e.pageX - $(this).offset().left,
            top: e.pageY - $(this).offset().top
        },
        css: {
            position: 'relative',
            left: $('#left').val(),
            top: $('#top').val(),
            //left: '-36px',
            //top: '-73px',
            backgroundImage: 'url(http://a2.twimg.com/profile_images/792324874/grey_bigger.png)',
            width: '73px',
            height: '73px'
        }
    }).appendTo('#map');
    
}).bind('contextmenu', function(e) {

    $('<div id="#new2"></div>').overlay2({
        position: {
            left: e.pageX - $(this).offset().left,
            top: e.pageY - $(this).offset().top
        },
        css: {
            backgroundImage: 'url(http://a2.twimg.com/profile_images/792324874/grey_bigger.png)',
            width:...