响应式设计：将元素置于相对位置的实现疑问

核心思路是通过相对定位容器+百分比偏移，让目标<div>以图片容器为定位基准，这样无论屏幕分辨率如何变化，<div>都能保持和图片线条的相对位置。

具体实现步骤 #

1. 结构布局 #

把图片和需要定位的<div>放在同一个父容器内，父容器作为定位参考系：

<div class="image-wrapper">
  <img src="你的图片地址" alt="自适应图片">
  <div class="line-sticker"></div>
</div>

2. 基础样式设置 #

• 父容器设置position: relative，让内部绝对定位元素以它为基准
• 图片设置width: 100%; height: auto，保证自适应屏幕且维持原比例

.image-wrapper {
  position: relative;
  width: 100%;
  /* 可选：限制最大宽度，避免图片在超大屏幕上拉伸过度 */
  max-width: 1400px;
  margin: 0 auto;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block; /* 消除图片默认的底部间隙 */
}

3. 精准定位目标<div> #

给目标<div>设置绝对定位，用百分比值设置top/left/right属性，这些百分比是相对于父容器（即图片容器）的尺寸计算的：

.line-sticker {
  position: absolute;
  /* 根据你示例中灰色线条的实际位置调整百分比 */
  top: 32%;
  left: 15%;
  right: 15%;
  height: 3px;
  background-color: #888; /* 和示例灰色线条颜色一致 */
}

进阶优化（可选） #

如果需要更精准的定位，比如线条位置和图片比例严格绑定，可以用padding-top维持容器的宽高比（比如图片是16:9比例，padding-top: 56.25%），再把图片设为容器背景图：

.image-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  /* 16:9比例的图片，用padding-top维持高度 */
  padding-top: 56.25%;
  background-image: url('你的图片地址');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.line-sticker {
  position: absolute;
  top: 32%;
  left: 15%;
  right: 15%;
  height: 3px;
  background-color: #888;
}

这样设置后，无论屏幕怎么缩放，<div>都会自动跟随图片的比例调整位置，始终贴合目标灰色线条。

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