设置perspective的父元素导致子元素fixed定位失效问题求助

当父元素设置了perspective或transform-style: preserve-3d时，会创建一个新的3D变换上下文，这个上下文会成为子元素position:fixed的包含块——也就是说，fixed元素不再相对于视口定位，而是相对于这个父元素。再加上父元素的overflow-y:auto，滚动的是父容器，自然就看不到fixed元素固定在屏幕上的效果了。

既然要同时保留视差滚动和fixed定位，就得把3D变换上下文和滚动容器拆分开，避免互相干扰。

方案1：拆分独立的视差容器 #

把负责视差背景的3D样式放到一个固定的全屏容器里，和滚动内容容器彻底分离：

HTML结构 #

<!-- 专门承载视差背景的容器 -->
<div class="parallax-container">
  <div class="background"></div>
</div>

<!-- 滚动内容容器，放fixed元素和长内容 -->
<div class="home-page-wrapper">
  <div class="home-page">我是要固定的内容</div>
  <!-- 这里放足够长的内容触发滚动 -->
  <div class="scroll-content">
    <p>长内容...</p>
    <p>长内容...</p>
    <!-- 重复足够多的行 -->
  </div>
</div>

CSS样式 #

.parallax-container {
  position: fixed; /* 固定在视口，不随滚动移动 */
  height: 100vh;
  width: 100vw;
  perspective: 10px;
  transform-style: preserve-3d;
  z-index: -1; /* 把背景放到内容下方 */
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(你的背景图片地址) center/cover no-repeat;
  transform: translateZ(-5px) scale(2);
}

.home-page-wrapper {
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  /* 这里不要加perspective或transform-style */
}

.home-page {
  position: fixed;
  top: 20px;
  left: 20px;
  /* 其他自定义样式 */
}

这个方案的核心是：视差背景的3D上下文独立在一个fixed容器里，不会影响到滚动容器里的fixed元素，后者依然以视口为包含块，实现固定效果，同时背景的视差滚动也能正常工作。

方案2：用sticky替代fixed（备选场景） #

如果你的需求是在父容器滚动时，让元素保持在容器内的顶部（而非严格的视口固定），可以把position:fixed改成position:sticky：

.home-page {
  position: sticky;
  top: 0;
  width: 100%;
}

但注意sticky是相对于父滚动容器的，和fixed的视口固定逻辑不同，需要根据实际需求选择。

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