浏览器中绝对定位Div在不同屏幕下相对位置异常的问题咨询

这事儿我刚入行的时候也踩过一模一样的坑！给你拆解清楚问题根源：

首先，你设置的position: absolute确实会让元素脱离文档流，它们的位置是相对于最近的已定位祖先元素（如果没有的话，就是默认的视口/文档根节点）。你这两个Div的top分别设为200px和400px，理论上它们之间的实际像素间距是固定的200px——但问题出在「视觉感知」上！

核心原因：屏幕高度差异导致视觉比例不同 #

• 笔记本屏幕通常高度较小（比如1080p屏幕高度是1080px），200px的间距占屏幕总高度的比例大概是18%，视觉上就显得比较紧凑；
• 宽屏台式机的屏幕高度往往更大（比如2K屏幕高度1440px、4K屏幕2160px），同样200px的间距占总高度的比例降到13%甚至9%，视觉上就会觉得“距离很远”。

简单说：实际像素间距是固定的，但在不同高度的屏幕上，这个间距占屏幕的比例不一样，你的眼睛就会误以为它们的相对位置变了。

如何让相对视觉位置保持固定？ #

如果你希望两个Div的相对位置在任何屏幕上都保持视觉一致，别用固定的px值，改用相对单位：

• 用vh（视口高度的百分比）：比如第一个Div设top: 20vh，第二个设top: 40vh，这样它们的间距始终是屏幕高度的20%，视觉比例完全固定；
• 或者用%，但要注意%是相对于包含块的高度，所以得确保父元素（包含块）有明确的高度设置。

另外补充：如果你的Div是相对于某个设置了position: relative的父元素定位，还要检查父元素的高度是否会随屏幕尺寸变化，这也可能影响两个Div的相对视觉位置。

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