前端屏保开发求助：双div移动时顶部div不可见及三图屏保实现

Hey there! Let's work through your two frontend problems step by step—they're both tied to your layered screensaver implementation, so we can fix them together.

1. Fixing the Top Div Not Displaying Properly #

First, let's tackle why your top div isn't showing up when moving. The most common culprits here are z-index hierarchy issues, overflow clipping, or incorrect positioning. Here's how to fix it:

Common Causes & Fixes #

• Z-index Misconfiguration: If your top div has a lower z-index than the layers below it, it'll be hidden. Make sure your layers follow this order (highest z-index on top):

  #bgimg { z-index: 1; } /* Bottom fixed layer */
  #midimg { z-index: 2; } /* Middle moving layer */
  #topimg { z-index: 3; } /* Top fast-moving layer */
  

• Overflow Clipping: If your html or body has overflow: hidden set (and you don't want clipping), or if a parent container is hiding overflow, your top div might get cut off when moving. Ensure your base styles allow full visibility (or adjust if you want to hide overflow for the screensaver):

  html, body {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Use this if you want to hide scrollbars during screensaver */
  }
  

• Incorrect Positioning/Size: Make sure all your image layers cover the full viewport so they don't get cut off:

  #bgimg, #midimg, #topimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Ensures images fill the container without distortion */
    background-repeat: no-repeat;
  }
  

2. Implementing the Layered Screensaver (Fixed Bottom, Moving Middle, Fast-Moving Top) #

Your div structure is on the right track—we just need to adjust the CSS and add JavaScript to control the movement speeds properly. Here's a complete working implementation:

Full Code Example #

<!DOCTYPE html>
<html>
<head>
  <title>Moving Screen Saver</title>
  <style>
    html, body {
      position: relative;
      height: 100vh;
      width: 100vw;
      margin: 0;
      padding: 0;
      overflow: hidden; /* Hides scrollbars when layers move */
    }

    #bgimg {
      background-image: url("background/moon_bg.png");
      position: fixed; /* Fixed to viewport—never moves */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 1;
    }

    #midimg {
      background-image: url("background/mid_layer.png");
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 2;
    }

    #topimg {
      background-image: url("background/top_layer.png");
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div id="bgimg"></div>
  <div id="midimg"></div>
  <div id="topimg"></div>

  <script>
    // Get layer elements
    const midLayer = document.getElementById('midimg');
    const topLayer = document.getElementById('topimg');

    // Adjust these values to change movement speed (higher = faster)
    const midSpeed = 0.5;
    const topSpeed = 1.2;

    // Track current position
    let midPosition = 0;
    let topPosition = 0;

    function animateLayers() {
      // Update positions
      midPosition += midSpeed;
      topPosition += topSpeed;

      // Reset position when layer fully exits viewport (creates loop)
      if (midPosition >= midLayer.offsetWidth) {
        midPosition = 0;
      }
      if (topPosition >= topLayer.offsetWidth) {
        topPosition = 0;
      }

      // Apply movement (using transform is smoother than modifying left/top)
      midLayer.style.transform = `translateX(-${midPosition}px)`;
      topLayer.style.transform = `translateX(-${topPosition}px)`;

      // Keep animation running smoothly
      requestAnimationFrame(animateLayers);
    }

    // Start the screensaver animation
    animateLayers();
  </script>
</body>
</html>

Key Notes About This Implementation #

• Performance: We use transform instead of modifying left/top because it triggers fewer browser reflows, leading to smoother animation.
• Loop Effect: The code resets each layer's position once it fully exits the viewport, so the screensaver runs continuously without gaps.
• Fixed Bottom Layer: position: fixed ensures the bottom image stays locked to the viewport, no matter what.
• Speed Control: Adjust midSpeed and topSpeed to get the exact movement rates you want—just make sure the top layer's speed is higher than the middle one for the parallax effect.

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