位置：固定在 Chrome 中被忽略答案

【问题标题】：Position: fixed ignored in Chrome位置：固定在 Chrome 中被忽略
【发布时间】：2018-12-18 17:54:19
【问题描述】：

我在 Chrome 中遇到了 position:fixed 未修复的问题。我可能做错了什么，但这适用于 FF 和 Safari，但不适用于 Chrome (69.0.3497.100)。在 Chrome 中，当滚动页面时，蓝色 div 移动，绿色变为可见，但 FF 和 Safari 不会滚动，绿色始终隐藏。谁能解释为什么会发生这种情况以及如何获得真实位置：在 Chrome 中已修复？

div {
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background-color: blue;
    }
    body {
      background-color: green;
    }

&lt;div&gt;&lt;/div&gt;

我在chrome中打开了这篇文章，当sn-p全屏时，它可以工作，但是当我制作一个新的html文件并直接打开它时，错误再次出现。

<html>
   <body>
     <div></div>
     <style>
      div {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: blue;
      }
      body {
        background-color: green;
      }
     </style>
   </body>
</html>

【问题讨论】：

您可以edit您的问题以包含所需的任何信息。我无法在 Windows 10 版本 71.0.3578.98（官方构建）（64 位）上的最新版 Chrome 上重现此问题。
您是否制作了一个 .html 文件并打开它？ sn -p 不显示它。
是的，按照惯例将style 放在head 中，并逐字复制您的HTML。
我刚刚尝试使用四分钟前刚下载的最新 chrome，但它在 macOS El Capitan 上不起作用
我在 MacOS Mojave 上运行 Chrome 71.0.3578.98（官方构建），没问题。

标签： html css google-chrome css-position

【解决方案1】：

首先，最好将样式标签放在文档的头部。然后，您的 div 没有任何宽度和高度。尝试给你的 body 100vw 宽度和 200vh 高度，然后给你的固定 div 100px 宽度和 100px 高度。你会看到它的工作。此外，您必须在 top:0 和 bottom:0 之间做出决定，还要在 right:0 和 left:0 之间做出决定

【讨论】：

我假设您的意思是 100% 而不是 100px，因为我希望它填满页面，为什么是 200vh？
我没有意识到你想填满这个页面。 200vh 是扩展父级，这样你就可以有滚动效果并看到它的工作。所以，如果你想让一个 div 填充页面，你可以在你的 div 上使用 100vw 和 100vh。
澄清一下，它应该不滚动。