how do I position a popup relative to a point in Openlayers?

Question

I have a fixed size FramedCloud Popup that I want to position relative to the point calling it, always above the point and with its right side 50px to the right of the point.

I am looking at the API and see positionBlocks and blocks, but I do not understand how to use them and if that's what I need. I'm really looking for.

I tried setting popup.relativePosition, hoping to find an offset parameter somewhere, but relative position doesn't seem to be having any effect.

var vector = new OpenLayers.Layer.Vector("Points",{
    eventListeners:{
        'featureselected':function(evt){
            var feature = evt.feature;
            var popup = new OpenLayers.Popup.FramedCloud("popup",
                OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                new OpenLayers.Size(275,71),
                "<div style='font-size:.8em'><h3>" + feature.attributes.title +"</h3></div>",
                null,
                true
            );
            popup.imageSrc = 'img/popup.png';
            popup.autoSize = false;
            popup.imageSize = new OpenLayers.Size(275,71);
            popup.relativePosition = "bl"
            popup.fixedRelativePosition = true;
            //popup.positionBlocks = {}
            feature.popup = popup;
            map.addPopup(popup);
        },
        'featureunselected':function(evt){
            var feature = evt.feature;
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
    }
});

Answer 1

As far as I can tell there is no way to position a popup with FramedCloud so I used Anchored:

var vector = new OpenLayers.Layer.Vector("Points",{
    eventListeners:{
        'featureselected':function(evt){
            var feature = evt.feature;
            var popup = new OpenLayers.Popup.Anchored("popup",
                OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                new OpenLayers.Size(275,71),
                "<div id='pincontent' onclick='pindetails()'><h3 data-description='"+  feature.attributes.content +"'>" + feature.attributes.title +"</h3></div>",
                null,
                false
            );
            popup.imageSrc = 'img/popup.png';
            popup.autoSize = false;
            popup.backgroundColor = 'transparent';
            var offset = {'size':new OpenLayers.Size(0,0),'offset':new OpenLayers.Pixel(-74,-10)};
            popup.anchor = offset;
            popup.panMapIfOutOfView = true;
            popup.imageSize = new OpenLayers.Size(275,71);
            popup.relativePosition = "br"
            popup.calculateRelativePosition = function () {
                 return 'tr';
            }
            feature.popup = popup;
            map.addPopup(popup);
        },
        'featureunselected':function(evt){
            var feature = evt.feature;
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }

    }
});