固定元素不保持固定与视差滚动

Question

我正在创建一个带有几张图像和视差滚动效果的幻灯片页面。滚动工作很好，但我想有按钮的音乐控制固定在顶部，但按钮不会保持固定无论我做什么。
我的图片是这样设置的:

.first {
  display: flex;
 
  position: relative;
  z-index: -1;
  height: 100vh;
  justify-content: center;
  align-items: center;
  transform: translateZ(-1px) scale(2);
background-image: url('./orange.png');
background-size: 100% 100%;
}

标题名为'dock'，代码如下

<div className="  dock">
    {" "}
    <button className="button" onClick={Playit}>
      Play Audio
    </button>{" "}
 
    <button className="button2" onClick={Stopit}>
      Pause Audio
    </button>
  </div>
CSS 
.dock {
 top: 0;
  text-align: center;
  z-index: 99;
position: fixed !important;
}

这是我第一次使用任何类型的滚动效果。我不确定为什么顶部的两个按钮不会保持固定。如有任何建议，我将不胜感激。
codesandbox可以在这里找到
提前谢谢你。

Answer 1

我不确定为什么顶部的两个按钮不会保持固定。

将音乐控件移出将尊重3d应用程序容器的固定位置。

至于"为什么";(从MDN):

固定

…它的位置相对于由视口建立的初始包含块，除非它的祖先之一有transform， perspective ，或者filter属性设置为非none(参见CSS Transforms Spec)，在这种情况下，祖先的行为作为包含块。

header {
  position: fixed;
  width: 100vw;
  background: bisque;
}
.app {
  perspective: 1px;
  transform-style: preserve-3d;
}
.box {
  height: 100vh;
  border: 4px solid lavender;
  text-align: center;
  vertical-align: center;
}

<header><button>Play me</button></header>
<section class="app">
  <div class="box">Thing 1</div>
  <div class="box">Thing 2</div>
  <div class="box">Thing 3</div>
</section>

Answer 2

position: fixed的目的略有不同。如果你需要一个固定元素在容器内，那么最好使用position: sticky而不是position: fixed。只需将这些规则添加到.dock选择器:

position: sticky
top: 0
z-index: 9999

:

.dock {
  background-color: red;
  align-items: center;
  justify-content: center;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 9999;
}