javascript - fullpage.js slider 。绝对 block 的问题。 Chrome

Question

我对 slider 控件和任何带有 position: absolute slider 部分的 block 有问题。

$(document).ready(function() {
    $('#fullpage').fullpage();
});

.slide { 
  text-align: center
}
.section {
  text-align: center;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  text-align: center;
  background: red;
  z-index: 2;
}

.slide1 {
  background: #cccccc;
}
.slide2 {
  background: #C3C3C3;
}

.section2 {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.0/jquery.fullPage.min.css" />
  <div id="fullpage">
      <div class="section section1">
        <div class="absolute">position: absolute</div>
        <div class="slide slide1"> Slide 1 </div>
        <div class="slide slide2"> Slide 2 </div>
      </div>
      <div class="section section2">Some section</div>
  </div>

如果上下滑动 - 一切正常。但是如果你用slider然后就会上下滑动。该页面将在没有 slider 控件(和绝对 block )的情况下显示。

我找不到它发生的原因。仅在 Chrome 和 Opera 中出现问题。

更新:这是 jsfiddle 例如:https://jsfiddle.net/nfL5w9yL/1/

Answer 1

Fullpage 添加 z-index:1 到 fp-slides最近有同样的问题，我不知道你是否找到了解决方案，但我的解决方案是从 fp-slides 中删除 z-index!

奇怪的是，在我的例子中，导航按钮没有受到影响，只有我的绝对位置 div