响应式网页开发中，图片和文字重叠的问题通常出现在未针对不同屏幕尺寸做布局适配的场景下，比如固定定位、浮动未清除或者弹性/网格项尺寸计算错误，都会导致元素在窄屏或宽屏下出现覆盖情况。解决这类问题的核心思路是结合布局模型和媒体查询，根据屏幕尺寸动态调整元素的排列方式和尺寸。
方案一：使用flex结合媒体查询调整
flex布局适合一维方向的元素排列，我们可以通过设置flex容器的排列方向，在不同屏幕尺寸下切换横向或纵向排列，避免元素重叠。
基础布局结构
首先构建包含图片和文字的容器结构，图片和文字作为flex项：
<div class="content-container">
<img src="https://ipipp.com/demo-img.jpg" alt="示例图片" class="content-img">
<div class="content-text">
<h3>示例标题</h3>
<p>这是一段示例文字内容，用于展示响应式布局下的排列效果。</p>
</div>
</div>
flex基础样式设置
先给容器设置flex属性，默认宽屏下横向排列，同时给图片和文字设置基础尺寸，避免内容溢出：
.content-container {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.content-img {
width: 400px;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.content-text {
flex: 1;
font-size: 16px;
line-height: 1.6;
}
添加媒体查询适配窄屏
当屏幕宽度小于768px时，切换为纵向排列，避免图片和文字在窄屏下因宽度不足出现重叠：
@media screen and (max-width: 768px) {
.content-container {
flex-direction: column;
gap: 15px;
}
.content-img {
width: 100%;
height: 200px;
}
.content-text {
width: 100%;
}
}
方案二：使用grid结合媒体查询调整
grid布局适合二维维度的布局控制，我们可以通过定义网格列数，在不同屏幕尺寸下调整网格结构，解决重叠问题。
grid基础样式设置
宽屏下定义两列网格，图片占1列，文字占1列，明确划分元素区域：
.content-container {
display: grid;
grid-template-columns: 400px 1fr;
align-items: center;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.content-img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.content-text {
font-size: 16px;
line-height: 1.6;
}
窄屏下调整网格列数
屏幕宽度小于768px时，将网格切换为单列，元素纵向排列，避免重叠：
@media screen and (max-width: 768px) {
.content-container {
grid-template-columns: 1fr;
gap: 15px;
}
.content-img {
height: 200px;
}
}
两种方案的选择建议
如果布局只需要控制一维方向的元素排列，优先选择flex方案，代码更简洁，适配逻辑更清晰；如果需要同时控制行和列的元素分布，或者布局结构更复杂，优先选择grid方案，网格定义更直观。两种方案都可以通过媒体查询灵活适配不同屏幕尺寸，从根源上避免图片和文字重叠的问题。
如果重叠问题是由固定定位导致的，还需要检查定位元素的z-index属性和偏移量设置，结合媒体查询调整定位参数，避免覆盖其他内容元素。