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

css webkit css-position
Marcus picture Marcus · Feb 22, 2011 · Viewed 49.6k times · Source

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.

Answer

thirtydot picture thirtydot · Feb 22, 2011

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.

Related questions

Enable real fixed positioning on Samsung Android browsers

The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply …

Read More
Mobile Webkit reflow issue

I've been experiencing an issue in mobile versions of webkit (specifically Webkit 534.46 on iOS 5.1.1 as mobile Safari, and now Chrome for iOS) which doesn't happen on any desktop browser that I've seen. (i.e. the demos below should be viewed …

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More