Firefox中相对定位元素预留空间致页面滚动的解决方法问询

我完全理解你的困扰——Firefox确实会为相对定位的元素保留它原本在文档流中的空间，哪怕你通过top/left把它挪到了别的位置，这就导致了不必要的滚动条。既然你不想用overflow或者fixed定位，那我给你两个更贴合需求的解决方案：

方案一：用transform: translate()替代相对定位的偏移 #

相对定位的top/left偏移本质是在文档流基础上移动元素，所以会保留原位置的空间；但CSS的transform: translate()是在视觉层面移动元素，完全不会影响文档流，自然也就不会预留多余空间了。修改reddiv的样式如下：

<html> 
<body> 
  <div class="bluediv" style="position: absolute;height: 400px;width: 400px;background-color: blue;"> 
    <div class="yellowdiv" style="height: 350px;width: 400px;background-color: yellow;"> 
    </div> 
    <div class="reddiv" style="transform: translateY(-350px); height: 100px;width: 100px;background-color: red;"> 
    </div> 
  </div> 
</body> 
</html>

这样reddiv会被向上移动350px，和你原来的视觉效果完全一致，但不会在文档流底部留下50px的空白，页面也就不会出现滚动条了。

方案二：将reddiv设置为绝对定位（基于父元素） #

你的父元素bluediv已经是绝对定位了，把reddiv改成绝对定位后，它会相对于bluediv来定位，而且不会占用文档流的空间。调整样式如下：

<html> 
<body> 
  <div class="bluediv" style="position: absolute;height: 400px;width: 400px;background-color: blue;"> 
    <div class="yellowdiv" style="height: 350px;width: 400px;background-color: yellow;"> 
    </div> 
    <div class="reddiv" style="position: absolute;top: 0;left: 0;height: 100px;width: 100px;background-color: red;"> 
    </div> 
  </div> 
</body> 
</html>

这里直接把reddiv定位到父元素的左上角，和你原来用top: -350px的效果一致，同时不会产生多余的空间占用，完美解决滚动条问题。

这两个方案都不需要修改父元素的overflow，也不用改成fixed定位，应该能满足你的需求～

内容的提问来源于stack exchange，提问作者Fatalgoddess