修复了 JavaScript 警告 - 使用 CSS 位置固定到页面顶部答案

【问题标题】：Fixed JavaScript Warning - Pin to Top of Page Using CSS Position修复了 JavaScript 警告 - 使用 CSS 位置固定到页面顶部
【发布时间】：2012-06-25 17:30:50
【问题描述】：

我正在编写noscript 代码块，我在其中做一些事情，其中包括页面顶部的<p>，以提醒用户他/她禁用了 JavaScript。

禁用 JavaScript 后的最终结果应该类似于 Stack Exchange 站点（这是我的屏幕截图 - SE 看起来很相似，只是它位于页面的最顶部）：

我的工作正常，但如果红色条在滚动时保持固定在顶部，我会喜欢它。

我尝试使用position: fixed; 方法，但它最终移动了p 元素，我无法让它看起来与没有position: fixed; 修改时完全相同。我尝试摆弄 CSS top 和 left 以及其他定位，但它看起来不像我想要的那样。

这是一个 CSS sn-pt：

<noscript>

<style type="text/css">

p.noscript_warning {
    position: fixed;
}

</style>

</noscript>

【问题讨论】：

您可能想要关闭样式标签。更好的是，在头部放置一个 noscript 标记并链接到外部 CSS 文件（我知道它很小，但这样做是最佳实践）。但是，我不能 100% 确定 noscript 标签是否有效。
还尝试将top、left 和right 属性设置为0 以及height。这应该可以达到您在除 IE 6 之外的所有内容中寻找的效果。在 noscript 样式表中修复主要内容容器的位置和尺寸可能也是值得的，这样它就不会落后于固定的段落。
对不起，我实际上只是将它复制成块并忘记了结束样式标签。它在我的代码中；--) 感谢 top、left、right 属性。我玩了一下这些，并没有得到我想要的结果，但也许我做得不对。

标签： css javascript noscript

【解决方案1】：

. 后面不应该有空格。

p.noscript_warning {
    position: fixed;
    top: 0;
    width: 100%; /* For Browser Compatibility */
}

在这里查看Fiddle... :)

【讨论】：

小提琴好。我的现在工作得更好了。剩下的唯一部分是填充身体，我现在正在这样做。谢谢！
嘿，快速跟进...我试图将其置于其他所有内容之上，而 z-index 似乎没有这样做（可能是因为所有元素都没有设置正确的位置属性）。有没有另一种方法可以把这条丝带叠在其他东西上？再次感谢！
尽可能地提供z-index。如果不行，对于IE 6 / 7，需要将position: relative给body。
谢谢 - 我最终找到了导致问题的 div，并给它一个 z-index 的 0，然后将 noscript_warning 的 z-index 更改为 @ 987654332@。这似乎成功了 ;--) 再次感谢！
是的，这就是你应该用 IE 做的事情。忘了告诉你！ :)

【解决方案2】：

有时您需要做的就是在使用位置固定时更改文档标题。出于某种原因，Windows 对此很挑剔。如果您的文档类型很严格，您需要将其更改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

【讨论】：

【解决方案3】：

p. noscript_warning {
  position: fixed;
  margin:0;
  top:0; /* Not necessarily */
}

【讨论】：