如何防止<img>元素在调整屏幕尺寸时与页面文字发生重叠

• 你当前布局重叠的核心原因是使用固定值负margin margin-top: -150px 手动偏移图片位置，且<article>和图片所在的<div>为同级独立元素，没有统一的布局规则约束，视口宽度收缩时，右侧浮动的图片自然会挤压到左侧文字区域。
• 代码里用到的align="right"属于已经不推荐使用的原生HTML浮动属性，本身没有响应式适配能力，和固定负margin搭配很容易出现元素重叠问题。

推荐使用Flex布局实现左右排列的响应式结构，修改后的代码如下：

HTML部分 #

将文字区域和图片区域放到同一个父容器内，删除原有负margin和废弃的align属性：

<!-- 新增公共父容器 -->
<div class="content-wrapper">
  <article>
    <p id="talkbubble">test</p>
  </article>
  <div>
    <img style="margin-right: 40px;" src="img.pic" alt="img--3">
  </div>
</div>

CSS部分 #

给父容器增加Flex布局规则，实现自适应排列：

.content-wrapper {
  /* 开启横向弹性布局 */
  display: flex;
  /* 左右元素两侧对齐，中间自动留空 */
  justify-content: space-between;
  /* 视口宽度不足时自动换行，避免元素挤压 */
  flex-wrap: wrap;
  /* 左右两侧内边距可根据需求调整 */
  padding: 0 20px;
  /* 定义文字和图片的最小间距，小于该间距时自动换行 */
  gap: 24px;
  /* 如果需要文字和图片垂直居中对齐，可开启下面的配置 */
  /* align-items: center; */
}

/* 小屏适配：宽度小于768px时文字在上、图片居中显示 */
@media (max-width: 768px) {
  .content-wrapper {
    justify-content: center;
  }
  #talkbubble {
    width: 100%;
    text-align: center;
  }
}

• 响应式页面中尽量避免使用固定像素的负margin做位置偏移，固定值不会随视口尺寸变化适配，很容易引发布局错乱。
• 如果需要调整文字和图片的垂直相对位置，可以通过给对应子元素加align-self属性实现，不需要手动写margin调整。

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