jquery ui position with offsets not working

Positioning with offset not working.

Example:
CSS:
#targetElement {
height:300px;
margin: 20px;
border: dashed 1px #ee4455;
background: #9cf;
}
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: rgba(255,255,255,.3);
border: dashed 1px #ee4455;
}

HTML:
<div id="targetElement">
2 and 3 should be at the same position relative to 1
<div class="positionDiv" id="position1">1</div>
<div class="positionDiv" id="position2">2</div>
<div class="positionDiv" id="position3">3</div>
</div>

JS:
$( "#position1" ).position({ my: "center", at: "center", of: "#targetElement" });
$( "#position2" ).position({ my: "left+50% top+50%", at: "left+100% top", of: "#position1" });
$( "#position3" ).position({ my: "center center", at: "right top", of: "#position1" });

#position2 and #position3 should be at the same position relative to #position1
I know that left+50% = center but what if i want to use a different offset .

you can see the example in this fiddle

Start by reproducing the positioning examples in the linked JSFiddle and compare the results for #position2 and #position3. Trace the jQuery UI position behavior used by these calls; done means percentage and custom offsets produce the intended relative placement and the reported case is covered by a verified result.