如何使DIV自适应不同屏幕，稳定适配图片内的指定区域？

看起来你遇到的核心问题是绝对定位元素的参考上下文不对，加上用视口百分比定位导致不同屏幕下错位。咱们一步步来修复：

问题根源分析 #

你给#stuff用了position: absolute，但它的父元素#banner没有设置position: relative，所以这个绝对定位是相对于整个文档（视口）来计算位置的，而不是相对于你的图片容器。另外，图片本身的高度会随着宽度自适应变化，但你的top/height百分比是基于视口高度，不是图片的实际高度，这就导致不同屏幕尺寸下，DIV和图片内的盒子完全对不上。

修复方案 #

1. 给图片容器添加定位上下文 #

给#banner设置position: relative，这样里面的绝对定位元素会以它为参考基准，而不是整个页面。

2. 确保图片自适应且保持比例 #

给图片设置width: 100%; height: auto;，这样图片会铺满容器同时保持原有比例，容器的高度也会跟着图片自动调整。

3. 基于图片容器的百分比定位DIV #

把#stuff的top/left/width/height都改成相对于图片容器的百分比（也就是你图片内盒子在原图中的比例），比如如果原图里盒子距离顶部是25%的图片高度，宽度是72%的图片宽度，那这些数值就固定用百分比，不管屏幕多大，都会和图片内的盒子完美对齐。

修改后的代码示例 #

<div id="banner">
  <img src="http://grouptheory.sammiirose.com/group%20theory%20header%202.png" alt="Banner">
</div>
<div id="stuff">
  Test words in here
</div>

<style type="text/css">
#banner {
  position: relative; /* 关键：让它成为子元素绝对定位的参考 */
  width: 100%;
}

#banner img {
  width: 100%;
  height: auto; /* 保持图片比例，容器高度随图片自适应 */
}

#stuff {
  position: absolute;
  top: 25%; /* 基于图片容器的高度百分比，对应原图内盒子的位置 */
  left: 1%; /* 基于图片容器的宽度百分比 */
  width: 72%; /* 基于图片容器的宽度百分比 */
  height: 70%; /* 基于图片容器的高度百分比 */
  border: 1px solid black;
  overflow: auto;
  color: #000000;
  text-align: center;
}
</style>

额外提示 #

如果需要更精准的对齐，你可以用PS或者在线工具测量原图内盒子的相对比例（比如盒子顶部距离图片顶部的像素数 ÷ 图片总高度 = 百分比），把这些比例值用到CSS里，就能做到在任何屏幕尺寸下都完美贴合图片内的盒子啦。

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