CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Randomblue
Randomblue

Reputation: 116273

Position fixed; left works fine, right doesn't

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?

Upvotes: 1

Views: 1888

Answers (3)

vzwick
vzwick

Reputation: 11044

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
});

Upvotes: 4

Rob W
Rob W

Reputation: 348982

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

Upvotes: 2

Max Allan
Max Allan

Reputation: 640

On the second example you may have missed the $ at $mySpan?

Upvotes: 0

Related Questions