fullpage.js滑块。绝对块的问题。铬

I have a problem with slider controls and any block with position: absolute on slider section.

我有滑块控件和任何位置块的问题:绝对滑块部分。

$(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>

If you slide down and up - everything is ok. But if you use slider and then will slide down and up. The page will show without slider controls(and absolute block).

如果你向下滑动 - 一切都很好。但是如果你使用滑块然后会向下滑动。该页面将显示没有滑块控件(和绝对块)。

I can't find why it is happening. Problems occurs only in Chrome and Opera.

我找不到为什么会这样。问题仅出现在Chrome和Opera中。

UPDATES: Here is jsfiddle for example: https://jsfiddle.net/nfL5w9yL/1/

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

1 个解决方案

#1

Fullpage adds z-index:1 to fp-slides Had the same issue recently, i don't know if you found a solution, but my solution was to remove z-index from fp-slides!

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

the weird part is that in my case the navigation buttons were not affected, only my position absolute div

奇怪的是,在我的情况下导航按钮不受影响,只有我的位置绝对div

#1