Position fixed; left works fine, right doesn't

Question

I have a span called $mySpan .

Calling

$mySpan.css({
    position        : 'fixed',
    left            : '50%',
    top             : '15%',
    backgroundColor : 'red',
    'z-index'       : 1000
});

works just fine. However,

$mySpan.css({
    position        : 'fixed',
    right           : '50%',
    top             : '15%',
    backgroundColor : 'red',
    'z-index'       : 1000
});

doesn't show the span.

As you can see, it's probably not a z-index problem. I'm really confused because my code is quite complex and I haven't been able to build a simple example using jsFiddle. I have no clue where to start looking for what is going wrong.

Does anyone have a hint as to why the second approach is not working? How could I debug such a problem?

Answer 1

Try this:

$mySpan.css({
    'position'        : 'fixed',
    'left'            : 'auto', /* <-- oftentimes, browsers screw up if 'left' is still set */
    'right'           : '50%',
    'top'             : '15%',
    'backgroundColor' : 'red',
    'z-index'         : 1000
});

Answer 2

The unexpected result can be caused by a margin-right CSS property. If this property is set, remove it to fix your code.

Answer 3

在第二个例子中，你可能已经错过了$在$mySpan ？