使用position:relative/absolute及top/left时移动端响应式异常问题

你的问题根源在于固定像素值的绝对定位和错误的父容器范围：

• 原代码中<nav>在position:relative的div外部，导致它的绝对定位参考对象是整个页面（或最近的有定位的祖先元素，通常为body），移动端页面宽度缩小后，固定的top:167px和left:97px会完全偏离目标位置。
• 图片使用固定的width:750px;height:350px，无法自适应移动端屏幕，进一步加剧错位。

修复方案1：调整结构+百分比定位（推荐） #

核心修改点： #

1. 将<nav>移入position:relative的div内部，让绝对定位的参考对象变为图片容器，而非整个页面。
2. 把所有固定像素值替换为百分比，保持元素间的比例关系，适配不同屏幕尺寸。
3. 图片设置为自适应宽度，保留原始比例。

修改后的代码： #

<div style='position: relative; max-width: 750px; margin: 0 auto;'>
  <!-- 图片改为自适应宽度，保持比例 -->
  <img src="images/frame tr.png" style='width: 100%; height: auto;' alt="png">
  
  <!-- 移入relative容器内，用百分比替代固定px -->
  <nav class="navbar sticky-top" style='position:absolute; top: 47.7%; left: 12.9%; width: 20.4%; height: 42.9%;'>
    <div class="placeresult bg-light d-grid h-100 w-100">
      <div class="form-group text-center wrapresult h-100">
        <div class="resultholder h-100">
          <img class="img-fluid h-100" src="<?php echo $relative.qrcdr()->getConfig('placeholder'); ?>" />
          <div class="infopanel"></div>
        </div>
      </div>
      <div class="preloader">
        <i class="fa fa-cog fa-spin"></i>
      </div>
      <input type="hidden" class="holdresult">
      <div class="text-center mt-2 linksholder"></div>
    </div>
  </nav>
</div>

数值说明： #

百分比是根据你原有的固定值计算的，确保和网页端比例一致：

• top: 47.7% = 167px ÷ 350px（原图片高度）
• left: 12.9% = 97px ÷ 750px（原图片宽度）
• width: 20.4% = 153px ÷ 750px
• height: 42.9% = 150px ÷ 350px

修复方案2：用CSS Grid替代绝对定位 #

如果你不想用绝对定位，可以用Grid布局实现层叠效果，更符合现代响应式设计：

<div style='display: grid; max-width: 750px; margin: 0 auto;'>
  <img src="images/frame tr.png" style='width: 100%; height: auto; grid-area: 1/1;' alt="png">
  <nav class="navbar sticky-top" style='grid-area: 1/1; margin-top: 47.7%; margin-left: 12.9%; width: 20.4%; height: 42.9%;'>
    <!-- 内部内容不变 -->
  </nav>
</div>

原理是将图片和nav放在同一个网格单元格，通过margin控制位置，同样用百分比适配不同屏幕。

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