嵌套边缘粘贴

• CSS
• father::常见的前端业务需求
• sticky的元素即使粘贴在滚动容器（可能是祖父元素）上，也不会超过父元素的范围
  • 即如果父元素在滚动容器中滚动出去之后，粘贴也会取消
• h2设置top：h1高度
• 动态获取h1高度：

<script>
      // 动态设置每个 section 的 --h1-width，便于同一 section 内的 .h2-container 继承
      document.addEventListener("DOMContentLoaded", function () {
        function updateAllSectionsH1Width() {
          const sections = document.querySelectorAll(".section");
          sections.forEach((section) => {
            const h1 = section.querySelector(".h1-container");
            if (!h1) return;
            const width = h1.offsetWidth;
            const height = h1.offsetHeight;
            section.style.setProperty("--h1-width", `${width}px`);
            section.style.setProperty("--h1-height", `${height}px`);
          });
        }
 
        updateAllSectionsH1Width();
        // 窗口大小变化时重新计算
        window.addEventListener("resize", updateAllSectionsH1Width);
      });
    </script>