daterangepicker 覆盖所有项目

问题描述

请注意我使用的是 daterangepicker : (https://cdn.jsdelivr.net/npm/daterangepicker) 我有一个问题，输入所有时间都超过所有项目（如 boostrap Modal 或 menu ）

<div class="col-md-3 form-group">
<div class="picker-carte" style="position:relative;">
<label for="datePicker" class=" control-label">Select date :</label>
 <input type="text" name="datePicker" class="form-control daterangepicker" value="{{$start_date}} - {{$end_date}}" data-start="{{$start_date}}" data-end="{{$end_date}}">
</div>
</div>

我试过了：

style="position:relative;"

或添加到类picker-carte：

.picker-carte {
    z-index: 0 !important;
}

页面外观：

一个

解决方法

不要修复日期选择器，而是增加“顶栏”的 z-index

.top-bar { /* or whatever class or ID has your top bar */
  position: relative; /* or whatever */
  z-index: 100; /* or as needed */
}

,

似乎他们给了日期范围选择器一个 x-index = 3001

我使用了下面的 css 并修复了它。

.daterangepicker { 
z-index: 0!important; 
}