Css Relative Positioning with negative top percentage.

Question

Recently I'm playing with custom jquery ui widget which is positioned "center bottom" of specified position. (Just imagine that google map marker's anchor..)

First, I have main widget and a DIV which has relative positioning with left -50%. Yes, it was shifted to left by its half width. But for height, it's not working what I thought.

Please checkout my example at http://jsfiddle.net/Reiot/UUADc/ and see what's wrong with that. Should I not use vertical negative % and always specify its pixel height?

Answer 1

-50% is going to be 50% of the height of a parent object, in this case 200px. So your vertical is getting offset 100px. Since you know the width of your widget (73px), just use the specific offset, -36px