css - 固定和绝对

Question

我正在尝试制作一个带有视差屏幕并在顶部有导航栏的网页。我已经尝试过，我所知道的一切，但我无法让它发挥作用。

Answer 1

问题是perspective:1px;在 body 里。删除该行和 position:fixed 可以工作，但删除 perspective:1px 会破坏视差。任何变换 css 都会导致 position:fixed 恢复为 position:relative。

Is this effect on position: fixed necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it’s much harder to implement otherwise. See Bug 16328. https://www.w3.org/TR/css-transforms-1/#perspective-property

与其将 perspective:1px 放在影响一切的 body 中，不如将它放在包装 div 中，如下所示:

 <div style="scrolling-content">
     ... the bits that scrolls...
 </div>

还有CSS...

 .scrolling-content {
      width: 100vw;
      height: calc(100vh - 70px);
      overflow-y: scroll;
      overflow-x: hidden;
      perspective: 1px;
      margin-top: 70px;
 }

70px 是导航栏的高度(包括内边距)。

同时设置正文

body {
     scroll-x:hidden; 
     scroll-y:hidden;
}