javascript - Zurb Foundation slider - 绝对位置问题

Question

我想在我的“叠加层”中使用范围 slider 。如下图:

<div class="overlay">

  <div class="range-slider" data-slider data-options="start: 1; end: 10;">
    <span class="range-slider-handle" role="slider" tabindex="0"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
  </div>

  <button>Ok</button>
  <button>Cancel</button>
</div>

但是由于下面显示的叠加 css 的绝对定位， slider 做了一些疯狂的事情并且不起作用:

.overlay{
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  background-color:#FFF;
  opacity: 0.85;
  padding: 50px;
}

但是当我将范围 slider 放置在叠加层之外时，它工作得很好。

我认为这与绝对宽度/高度有关，因为当我单击它时它会一直延伸到页面右侧。

有没有人以前经历过这种情况并能够提供建议？

整个过程的重点是我单击我的框，出现一个叠加层，其中有一个范围 slider 。我正在使用 Angular 。

谢谢

Answer 1

你没有给绝对定位的覆盖层一个宽度，所以js不能正确计算动画。

基本上，在 CSS 中，您必须始终为绝对定位 block 指定宽度(甚至是相对宽度)。