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;
}

这是我第一次使用任何类型的滚动效果。我不确定为什么顶部的两个按钮不会保持固定。您的任何建议将不胜感激。
这里有一个代码沙盒link
提前致谢。

Answer 1

<块引用>

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

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

至于“为什么”（来自MDN）：

<块引用>

已修复

...它相对于视口建立的初始包含块定位，除非它的祖先之一具有transform，perspective，或 filter 属性设置为除 none 以外的其他内容（请参阅 CSS 转换规范），在这种情况下该祖先表现为包含块。 [强调我的]

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 的用途略有不同。如果您需要在容器中使用 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;
}

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

2 个答案: