Zurb基础滑块-绝对位置问题

Question

我想在我的“覆盖”中使用一个范围滑块。如下图所示：

<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的绝对定位而不起作用，如下所示：

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

但是当我将范围滑块定位在覆盖图之外时，它工作得很完美。

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

以前有没有人经历过这种情况，并能给出建议？

整个过程就是我点击我的框，一个覆盖图就会出现，里面有一个范围滑块。我使用的是angular。

谢谢

Answer 1

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

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