响应式布局中滚动时文本显示在图片上方的问题修复咨询

嘿，我来帮你梳理下这个问题的解决思路哈！

从你描述的情况来看，滚动时文本跑到图片上方，大概率是移动端布局下的元素定位冲突或者z-index层级没设置对导致的——毕竟桌面端正常，只有响应式切换后出问题，说明移动端的适配逻辑没做全。

给你几个具体的修复步骤，你可以挨个试试：

• 先重置移动端的图片定位与层级
  要是你的图片因为滚动动态调整逻辑用了position: fixed/absolute脱离了文档流，那文本自然会跑到图片原来的位置上。你可以通过媒体查询强制重置移动端的图片样式，让它回到正常文档流：

  @media (max-width: 768px) {
    #artwork {
      position: static !important; /* 强制脱离固定/绝对定位，回到默认布局 */
      z-index: auto;
      transform: none !important; /* 清空动态设置的位移样式 */
    }
  }
  

• 给滚动逻辑加响应式判断
  你JS里的滚动动态调整图片的代码，应该只在桌面端生效，移动端要直接关掉！不然滚动时还在修改图片定位，肯定会乱。可以加个屏幕宽度的判断逻辑：

  document.addEventListener("DOMContentLoaded", function() {
      const artwork = document.getElementById('artwork');
      const sections = document.querySelectorAll('.content-section');
      
      // 封装滚动处理函数
      function handleScroll() {
          const isMobile = window.innerWidth <= 768;
          if (isMobile) {
              // 移动端重置图片样式，恢复正常布局
              artwork.style.position = 'static';
              artwork.style.transform = 'none';
              artwork.style.top = 'auto';
              return;
          }
          // 下面放你原来的桌面端滚动调整代码
          // ...你的原有逻辑...
      }
      
      // 监听滚动和窗口 resize，确保切换屏幕时也能适配
      window.addEventListener('scroll', handleScroll);
      window.addEventListener('resize', handleScroll);
      // 页面初始化时先执行一次，避免布局错乱
      handleScroll();
  });
  

• 最后排查父容器的溢出设置
  看看图片或文本的父容器有没有设置overflow: visible，或者有没有其他固定定位的元素干扰布局。可以临时给图片加个背景色（比如background: #fff），确认是不是因为图片透明导致文本透出来了。

按照这几步调整下来，应该就能解决滚动时文本跑到图片上方的问题啦！

备注：内容来源于stack exchange，提问作者newuser