浏览器缩放时绝对定位图片覆盖内容的CSS解决方法（不可改HTML）

可以通过调整CSS实现，核心是让绝对定位的图片与内容容器关联，同时利用动态计算偏移量或媒体查询，在窗口缩小时让图片向左移出视口，避免覆盖内容。以下是具体修改方案：

方法一：基于容器定位+动态偏移（平滑过渡） #

给图片的父容器.row-wrapper添加相对定位，让图片的绝对定位以它为基准，再通过calc计算动态偏移量，确保图片不会覆盖内容：

/* 新增：让图片以row-wrapper为定位基准 */
.row-wrapper {
  position: relative;
  overflow: hidden; /* 可选，隐藏溢出的图片，避免出现横向滚动条 */
}

/* 修改floating-image的left值 */
.floating-image {
  position: absolute;
  top: 50%;
  /* 计算逻辑：-图片宽度的一半 + content-wrap左侧padding的一半，让图片右侧刚好对齐内容区的左边缘 */
  left: calc(-50% + 125px); 
  width: 50%;
  transform: translateY(-50%);
  max-width: 350px;
  transition: left 0.3s ease; /* 可选，添加平滑过渡动画 */
}

/* 原样式保留 */
.container {
    max-width: 1230px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;  
}

.content-wrap {
    padding-left: 250px;
}

.floating-image img {
    max-width: 100%;
    height: auto;
}

方法二：媒体查询断点控制（适配小屏幕） #

如果需要在特定屏幕尺寸下直接让图片移出视口，同时调整内容区的padding，适合更明确的响应式需求：

/* 新增：让图片以row-wrapper为定位基准 */
.row-wrapper {
  position: relative;
}

/* 原样式保留 */
.container {
    max-width: 1230px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;  
}

.content-wrap {
    padding-left: 250px;
}

.floating-image {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    transform: translateY(-50%);
    max-width: 350px;
    transition: left 0.3s ease; /* 可选，平滑过渡 */
}

.floating-image img {
    max-width: 100%;
    height: auto;
}

/* 小屏幕下调整：图片移出视口，内容区占满宽度 */
@media (max-width: 768px) {
  .content-wrap {
    padding-left: 0;
  }
  .floating-image {
    left: -100%; /* 完全移出视口左侧 */
  }
}

/* 中等屏幕下可添加过渡阶段，让图片部分移出 */
@media (max-width: 992px) {
  .floating-image {
    left: -25%;
  }
}

原理说明 #

1. 原代码中.floating-image是相对于视口定位（因为所有父级都没有position:relative），所以窗口缩小时会一直停留在视口左边缘，覆盖内容。
2. 给.row-wrapper添加position:relative后，图片的绝对定位改为以这个容器为基准，偏移量会和容器宽度关联。
3. 通过calc动态计算left值，或者媒体查询设置不同断点的left值，能让图片在窗口缩小时自动向左移出，避免和内容区重叠。

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