Zurb Foundation Slider - Absolute Pos Issue

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;
}

但是當我將范圍滑塊放置在覆蓋層之外時，它可以完美地工作。

我認為這與絕對寬度/高度有關，因為當我單擊它時，它只會一直延伸到頁面右側。

有沒有人曾經經歷過這種情況並且能夠提供建議？

整個過程的關鍵是單擊我的框，出現一個覆蓋圖，其中有一個范圍滑塊。 我正在使用棱角分明。

謝謝

Answer 1

你沒有給絕對定位的疊加賦予寬度，所以js無法正確計算動畫。

基本上，在CSS中，您必須始終為絕對定位塊指定寬度（甚至相對）。