合理使用 z-index 和媒体查询可解决css响应式布局中的元素重叠问题。z-index 控制定位元素的层叠顺序，数值越大越靠前，仅对 position 为 relative、absolute、fixed 或 sticky 的元素生效。通过设置关键元素如导航或弹窗的 z-index 保证其显示层级；结合媒体查询在不同屏幕宽度下动态调整样式，例如在移动端隐藏侧边栏并提升主内容的 z-index。同时采用 Flexbox 或 Grid 布局增强自适应性，设置 min-width 防止过度压缩，小屏下改用垂直布局，并为交互元素统一设定高 z-index（如1000+），从而有效避免重叠。
在CSS响应式布局中，元素重叠是常见问题，尤其在不同屏幕尺寸下，原本正常排列的元素可能因空间不足而发生堆叠。要解决这个问题，合理使用 z-index 和 媒体查询 可以有效控制元素的层叠顺序和布局结构，避免视觉混乱。
理解 z-index 的作用
z-index 决定元素在 Z 轴（垂直于屏幕）上的堆叠顺序。数值越大，元素越靠前。但要注意，z-index 只对定位元素生效（即 position 为 relative、absolute、fixed 或 sticky）。
例如：
.positioned {
position: relative;
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
这样可以确保关键内容（如导航栏或弹窗）始终显示在最上层。
立即学习“前端免费学习笔记（深入）”；
用媒体查询调整不同设备下的布局
响应式设计中，媒体查询 可根据屏幕宽度动态调整样式，避免元素挤压重叠。你可以通过改变定位方式、宽高或 z-index 来优化显示。
比如在移动端，将侧边栏隐藏并提升主内容的层级：
@media (max-width: 768px) {
.sidebar {
display: none;
}
.main-content {
width: 100%;
position: relative;
z-index: 15;
}
}
结合布局策略预防重叠
除了 z-index 和媒体查询，还需从布局层面减少重叠风险：
- 使用 Flexbox 或 Grid 布局替代绝对定位，提升自适应能力
- 为关键元素设置最小宽度（min-width），防止过度压缩
- 在小屏下改用垂直堆叠而非浮动布局
- 给弹出层、导航等交互元素统一设定较高的 z-index 层级范围（如 1000+）
基本上就这些。通过合理设置定位与层级，并配合媒体查询动态调整，就能在各种设备上避免元素重叠带来的显示问题。不复杂但容易忽略细节。