如何使 DIV 始终漂浮在右上角的屏幕上？答案

【问题标题】：How to make a DIV always float on the screen in top right corner?如何使 DIV 始终漂浮在右上角的屏幕上？
【发布时间】：2011-05-13 06:39:38
【问题描述】：

如何让 DIV 始终浮动在屏幕的右上角，这样即使向下滚动页面，DIV 仍会显示在相同的固定位置？谢谢。

【问题讨论】：

看这个链接，我想你想要粘性浮动页脚的反面。stackoverflow.com/questions/146659/…

标签： javascript css

【解决方案1】：

使用position: fixed，并将其锚定到页面的top 和right 两侧：

#fixed-div {
    position: fixed;
    top: 1em;
    right: 1em;
}

但是，IE6 不支持position: fixed。如果您在 IE6 中需要此功能，this purely-CSS solution 似乎可以解决问题。您需要一个包装器 <div> 来包含一些样式以使其工作，如 stylesheet 中所示。

【讨论】：

谢谢，但我需要一个跨浏览器的解决方案，无论是只涉及 CSS 还是 CSS 和 Javascript 的混合。
要评论位置：固定在 IE 中不起作用，howtocreate.co.uk/fixedPosition.html 是解决此问题的方法。
@akavsky 你可以使用 jquery function $(window).scroll(function () { });然后我们可以使用 jquerys animate 轻松地将其定位在 ....right 角
在回答另一个问题时，我设法弄清楚为什么我链接到的解决方案似乎有效。如果您想知道详细信息，它们都在这里：stackoverflow.com/questions/14718319/…

【解决方案2】：

使用position:fixed，如前所述，IE6 无法识别position:fixed，但通过一些 css 魔法可以让 IE6 正常运行：

html, body {
    height: 100%;
    overflow:auto;
}
body #fixedElement {
    position:fixed !important;
    position: absolute; /*ie6 */
    bottom: 0;
}

!important 标志使您不必对 IE 使用条件注释。这将使#fixedElement 在除IE 之外的所有浏览器中使用position:fixed，在IE 中，position:absolute 将与bottom:0 一起生效。这将为 IE6 模拟 position:fixed

【讨论】：

您也可以在该规则之后使用* html body #fixedElement { position: absolute; }。
在 Chrome 中执行此操作，但第二个位置超过了“固定”，因此我将交换这两个位置的顺序。这将使这项工作
@patrick：如果您正确添加了 !important 标志，则不应该。也就是说，当然交换两者也可以，不需要!important。