css - Changing position to float with jQuery not working? -

i got webpage composed of content , footer. main part of content div contains iframe when click on button. when iframe appears, content overlaps footer tried fix way :

• start footer :

  footer {    height: 50px;    background-color: #f5f5f5;    bottom: 0;    position:fixed;    width:100%;    padding-bottom: -40px; } 

then when iframe appears, switch position:fixed; position:float (which gives expected when make change hands ... looks jquery can't modify ?

here jquery call :

$('footer').css("color", "red"); // works $('footer').css("position", "float"); // doesn't work 

can't jquery ? missing ? thanks

based on description of page, sounds position value want static, rather float. there css rule called float, pretty different. try instead:

$('footer').css("position", "static"); // *should* work 

as why working when changed css rule hand, thing remember browser ignores css rules values doesn't understand , acts if weren't there. what's happening in case browser doesn't understand position: float, it's ignoring rule , using default. happens, default value position static, want.

i imagine when tried change position rule via js, dom again said "hey, don't know rule means, i'll pretend doesn't exist". might think overwrite or clear out position: fixed rule, won't because of "cascading" nature of css. setting rules in js on dom node equivalent setting inline rules, doesn't affect rules in <style> blocks or external stylesheets. in case, css said "i don't know inline rule means, i'll revert <style> rule understand."

an interesting experiment try set position: fixed in js @ start of page instead of in <style> block (or external sheet, not sure you're using) , try broken position: fixed code again. might work again in case because position: fixed might overwritten bad rule, have same effect using faulty rule in stylesheet, namely defaulting static.