Question

我遇到了一个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;
    }

<div></div>

我在chrome中打开了此信息，当该代码段为全屏显示时，它可以工作，但是当我制作一个新的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>

Answer 1

首先，最好将样式标签放在文档的开头。然后，您的div没有任何宽度和高度。尝试为您的身体设置100vw的宽度和200vh的高度，然后为固定的div设置100px的宽度和100px的高度。您将看到它的工作原理。另外，您还必须在top：0和bottom：0之间进行选择，并在right：0和left：0之间进行选择

位置：修复了Chrome中忽略的问题

1 个答案: