7个带背景和图片的Div：响应式场景下图片定位问题求助

我懂你现在的痛点——用position:absolute固定图片位置，窗口一缩放就跑位了对吧？这其实是绝对定位的特性导致的：绝对定位元素是相对于最近的非static定位父元素计算位置的，如果你的父容器（比如#main）没设置合适的定位和尺寸，图片就会相对于body或其他上层元素定位，自然在响应式场景下乱掉。

给你几个可行的解决方案：

方案1：给父容器添加相对定位，明确定位参考 #

这是最直接的修复方式，只需要给承载图片的父容器（也就是你的#main）加上position: relative，同时确保父容器有自适应的高度：

body { 
  margin: 0; 
  background-color: darkgray; 
} 

#main { 
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden; 
  margin-left: -1px; 
  /* 关键：设置相对定位，让子元素的绝对定位以它为参考 */
  position: relative;
  /* 给父容器设置最小高度，确保响应式下有稳定的高度基准 */
  min-height: 400px;
  /* 也可以用视口高度单位，更适配不同屏幕 */
  /* min-height: 50vh; */
} 

.image { 
  position: absolute; 
  width: 100px; 
  top: 33%; 
  /* 可选：加上水平定位，比如居中 */
  left: 50%;
  transform: translateX(-50%);
}

原理很简单：给#main设置position:relative后，.image的top:33%就会基于#main的高度计算，无论窗口怎么缩放，图片都会保持在父容器垂直方向33%的位置。

方案2：用Flexbox替代绝对定位（更推荐响应式场景） #

如果不想依赖绝对定位，Flexbox布局会更灵活，适配性更好：

body { 
  margin: 0; 
  background-color: darkgray; 
} 

#main { 
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden; 
  margin-left: -1px; 
  /* 启用Flex布局 */
  display: flex;
  flex-direction: column;
  /* 设置最小高度 */
  min-height: 400px;
} 

.image { 
  width: 100px; 
  /* 用margin-top实现33%的垂直位置 */
  margin-top: 33%;
  /* 水平居中 */
  align-self: center;
}

这种方式不需要担心定位参考的问题，Flex布局会自动根据父容器的尺寸调整子元素位置，响应式表现更稳定。

你可以根据自己的布局需求选一种试试，先试方案1应该能快速解决你的问题~

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