Question

我有一个由内容和页脚组成的网页。内容的主要部分是一个div，当我点击一个按钮时，它包含一个iframe。当这个iframe出现时，我的内容与页脚重叠，所以我尝试通过这种方式修复它：

从这样的页脚开始：

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

然后当我的iframe出现时，将position:fixed;切换为position:float（这给出了我用手做出改变时的预期，但...... 看起来jQuery无法修改它？

这是我的jQuery调用：

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

jQuery不能这样做吗？我错过了什么吗？感谢

Answer 1

问题可能是position:float;不存在。 position的有效值为：

静态
相对
固定
绝对

的 Relevant Source

但是你可以使用float属性（例如float: left，它在jquery中将是$('footer').css("position", "float");）

Answer 2

根据您对该网页的描述，听起来您想要的position值实际上是static，而不是float。有一个名为float的CSS规则，但它做了一些非常不同的事情。试试这个：

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

当你手动更改CSS规则时，为什么它正在工作，要记住的是浏览器忽略了CSS规则，其值不理解并且就像它们不在那里一样。在这种情况下可能发生的事情是浏览器无法理解position: float，因此它只是忽略规则并使用默认值。碰巧的是，position的默认值为static，这就是您想要的。

我想当你试图通过JS更改position规则时，DOM再次说'嘿，我不知道这条规则意味着什么，所以我会假装它不存在＆＃34;。您可能会认为这会覆盖或清除position: fixed规则，但由于＆＃34;级联＆＃34; CSS的本质。在DOM节点上设置JS中的规则等同于设置内联规则，这不会影响<style>块或外部样式表中的规则。所以在这种情况下，CSS表示＆＃34;我不知道这个内联规则的含义，所以我将恢复到我理解的<style>规则。＆＃34; < / p>

尝试的一个有趣的实验是在页面的开头设置JS中的position: fixed而不是<style>块（或外部工作表，不确定您使用的是哪个）并再次尝试破解的position: fixed代码。在这种情况下它可能会再次起作用，因为错误规则可能会覆盖position: fixed，这与使用样式表中的错误规则具有相同的效果，即默认为static。

用jQuery改变位置浮动不起作用？

2 个答案: