关于CSS position属性的疑问：fixed/absolute元素为何有顶部间距？

这一现象的核心原因在于元素的文档流状态差异，结合浏览器默认样式共同导致：

• 浏览器默认样式的影响：Chrome等现代浏览器会给<body>元素默认添加margin: 8px样式，这是页面顶部默认间距的根源。
• 不同定位的文档流表现：
  • position: relative：元素始终处于正常文档流中，作为<body>的子元素，会跟随文档流整体布局。如果它是<body>的第一个子元素，且没有设置padding/border阻断margin塌陷，它会和<body>顶部对齐，而<body>的默认margin会让整个文档（包括这个relative元素）整体向下偏移8px——视觉上你会觉得它顶部没有额外间距，因为它是跟着整个文档一起移动的。
  • position: fixed/absolute：元素会完全脱离正常文档流，此时它的定位参考是视口（fixed）或最近的定位祖先（absolute）。在未显式设置top/left等定位属性时，它会保留自己在文档流中的初始位置（也就是受<body>默认margin影响的偏移位置），但脱离文档流后，它不再跟随<body>的整体移动，于是你会看到它顶部存在8px的间距。

验证与解决方法 #

你可以通过以下方式验证和解决：

1. 打开浏览器开发者工具的元素面板，确认<body>的默认margin: 8px样式。
2. 重置全局默认样式，消除浏览器自带的间距：

   html, body {
     margin: 0;
     padding: 0;
   }
   

3. 若想让fixed/absolute元素紧贴视口顶部，可显式设置定位属性：

   .fixed-div {
     position: fixed;
     top: 0;
     left: 0;
   }
   

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