CSS (webkit): overriding top with bottom on absolute-positioned element

I'm having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky.

The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px.

For the sake of example

    .element {position:absolute; top:0;}

    /* in another file */
    .my .element {bottom:0;}

On firefox this works ok (bottom:0 is the applied style), but safari/chrome don't seem to be get over the top:0.

I can work around this problem, but it would be nice to come up with a clean solution.

Solution 1:

Use top: auto to "reset" top to its initial value.

bottom is a totally separate property to top (an element can have both a top and bottom), so perhaps you won't need bottom anymore.

Also, make sure your override selector is specific enough, but it doesn't sound like that's the problem in this case.

Solution 2:

.my .element { position: inherit !important; top: auto; }