如何实现固定定位内容仅在指定窗口可见且置于所有内容底层？

在下方的代码片段中，我编写了HTML结构，并设置了一个带有额外内容的窗口。我已将背景内容的position设为fixed，但不希望“Hello World”内容出现在标记窗口的外部。

如何设置该固定定位内容，使其置于所有其他内容后方，且仅通过这个“窗口”可见？

注意：需切换至全屏模式，才能查看我想要置于背景中的内容。

原始代码 #

CSS #

main {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: lightblue;
}

img {
  max-width: 100%;
  height: auto;
}

.ad {
  background-color: white;
  height: 400px;
  border: 1px dashed red;
  position: relative;
}
.ad .inner {
  position: fixed;
  top: 500px;
}

HTML #

<main>
  <header>
    <h2>I am a Title</h2>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
    </ul>
    <div class="ad">
      <div class="inner">
        <h2>Hello World</h2>
      </div>
    </div>    
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <img src="https://placekitten.com/1600/900" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
  </article>
</main>

要实现固定内容仅在指定窗口可见且位于所有内容后方，需要结合层级控制和视口裁剪，以下是两种可靠实现方式：

方式1：外部固定元素 + 层级覆盖 #

这种方法无需复杂计算，兼容性更好：

修改后CSS #

main {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: lightblue;
  /* 确保主内容层级高于固定元素 */
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  height: auto;
}

.ad {
  background-color: transparent; /* 透明背景，透出下方固定元素 */
  height: 400px;
  border: 1px dashed red;
  position: relative;
}

/* 把固定元素移到main外部，作为底层背景 */
.fixed-bg {
  position: fixed;
  top: 500px;
  left: 1rem; /* 对齐main的左侧padding */
  z-index: 0; /* 置于主内容下方 */
}

修改后HTML #

<!-- 固定元素放在main外部 -->
<div class="fixed-bg">
  <h2>Hello World</h2>
</div>
<main>
  <header>
    <h2>I am a Title</h2>
  </header>
  <article>
    <!-- 原有段落、列表内容不变 -->
    <div class="ad">
      <!-- 空容器作为窗口 -->
    </div>
    <!-- 后续内容不变 -->
  </article>
</main>

原理：主内容区main设置z-index:1，固定元素fixed-bg设为z-index:0，确保固定内容在底层。main的lightblue背景会覆盖固定元素，只有.ad区域因为背景透明，能透出下方的固定内容。

方式2：内部固定元素 + 动态裁剪（适合无需改结构场景） #

如果不想调整HTML结构，可以用clip-path裁剪固定元素，使其仅在.ad区域显示：

修改后CSS #

main {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: lightblue;
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  height: auto;
}

.ad {
  background-color: transparent;
  height: 400px;
  border: 1px dashed red;
  position: relative;
}

.ad .inner {
  position: fixed;
  top: 500px;
  z-index: -1; /* 置于主内容下方 */
  /* 裁剪固定元素到.ad的区域，需根据实际布局调整坐标 */
  clip-path: polygon(
    1rem 500px,
    calc(100% - 1rem) 500px,
    calc(100% - 1rem) calc(500px + 400px),
    1rem calc(500px + 400px),
    1rem 500px
  );
}

原理：通过clip-path定义多边形裁剪区域，只保留.ad对应的位置和尺寸部分，固定元素超出该区域的部分会被隐藏。注意：如果.ad的位置或尺寸是动态的，需要用JS实时计算裁剪坐标。

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