Question

我正在一个拥有整页视频背景的网站上工作。当用户向下滚动到网站内容时，有一个导航栏从左侧滑出（使用jQuery UI）。

以下是正在进行的网站：http://www.nolanmanning.com/ratcaveV12

正如您所看到的，导航滑出，但它不会立即显示在其他所有内容之上。我假设这是因为我使用z-index做错了，但我不知道。如果我移除滑动效果并且导航器始终可见，则问题就会消失。

如果有人能帮助我弄清楚我做错了什么，我真的很感激。

Answer 1

nav {
  box-sizing: border-box;
  position: fixed;
  height: 100%;
  width: 280px;
  background: #222;
  text-align: right;

  z-index: 3; /* change to 3 */
}

article {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #111;
  padding: 50px 50px 50px 330px;

  position: relative; /* added */
  z-index: 2; /* added */
}

#top {
  width: 100%;
  height: 100%;

  position: relative; /* added */
  z-index: 1; /* added */
}

我建议你将这个人的填充顶部改为：

#top h1 {
  padding-top: 60px;
}

这应该解决你的z-index问题。

导致滑动导航出现故障的视频背景？

1 个答案: