调整div位置时同步修改zIndex 实现环绕动画

想要实现类似月球凌日的动画效果：移动元素（月球）首次从左上到右下时显示在地球容器的上层，返回从右下到左上时隐藏在地球容器的下层，以此模拟环绕的视觉效果。

原代码核心问题 #

原代码中#animate是#container的子元素，根据CSS层级规则，子元素的z-index无法突破父元素的层级范围——即使设置z-index: -10，也只会在父元素内部降低层级，无法跑到父元素下方。

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Orbit</title>

    <style>
      body {
        margin-top: 15%;
        background-image: url("space.gif");
        background-repeat: no-repeat;
        background-size: 100%;
      }
      #container {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-image: url("earth.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 160%;
        z-index: 0;
        position: relative; /* 作为动画元素的定位基准 */
      }
      #animate {
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 100%;
        z-index: 2;
        left: 1px;
        top: 1px;
      }
      .rainbow-button {
        width: calc(20vw + 6px);
        height: calc(8vw + 6px);
        max-width: 100px;
        max-height: 50px;
        background-image: linear-gradient(
          90deg,
          #00c0ff 0%,
          #ffcf00 49%,
          #fc4f4f 80%,
          #00c0ff 100%
        );
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border: none;
        cursor: pointer;
      }
      .rainbow-button:hover {
        animation: slidebg 2s linear infinite;
      }
      .stop-button {
        width: calc(20vw + 6px);
        height: calc(8vw + 6px);
        max-width: 100px;
        max-height: 50px;
        background: #333;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border: none;
        cursor: pointer;
      }
      @keyframes slidebg {
        to {
          background-position: 20vw;
        }
      }
    </style>
  </head>
  <body>
    <center>
      <div>
        <p>
          <button onclick="myMove()" class="rainbow-button">
            Click Me
          </button>
        </p>
        <p>
          <button onclick="stop()" class="stop-button">
            Stop
          </button>
        </p>
        <!-- 容器与动画元素改为同级结构 -->
        <div id="container"></div>
        <div id="animate">
          <img src="moon.png" style="max-width: 100%" />
        </div>
      </div>
    </center>
    <script>
      let animationInterval; // 存储定时器ID，用于暂停动画

      function myMove() {
        const container = document.getElementById("container");
        const box = document.getElementById("animate");
        // 防止重复点击启动多个动画实例
        if (animationInterval) clearInterval(animationInterval);
        
        let pos = 1;
        let isMovingForward = true;

        function move() {
          box.style.left = `${pos}px`;
          box.style.top = `${pos}px`;

          isMovingForward ? pos++ : pos--;

          // 到达容器右下角边界时，切换到下层
          if (pos >= 350) {
            isMovingForward = false;
            box.style.zIndex = "-1";
          } 
          // 回到左上角起点时，切回上层
          else if (pos <= 1) {
            isMovingForward = true;
            box.style.zIndex = "2";
          }
        }

        animationInterval = setInterval(move, 1);
      }

      function stop() {
        if (animationInterval) {
          clearInterval(animationInterval);
          animationInterval = null;
        }
      }
    </script>
  </body>
</html>

关键修改说明 #

• DOM结构调整：将#animate从容器内部移到外部，变为同级元素，解决子元素层级无法突破父元素的问题，让z-index能直接和容器比较。
• 定位基准设置：给#container添加position: relative，让动画元素的绝对定位以容器为基准，确保移动路径始终围绕容器。
• 层级切换逻辑：元素到达容器右下角（pos >= 350）时，将z-index设为-1（低于容器的0），此时元素会跑到容器下方；回到起点时切回2，回到上层。
• 动画控制优化：添加全局变量存储定时器ID，实现暂停功能，同时防止重复点击启动多个动画。
• 交互样式优化：给按钮添加基础交互样式，提升体验。

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