daterangepicker覆盖所有项目

Question

请注意，我使用的是daterangepicker：(https://cdn.jsdelivr.net/npm/daterangepicker)我遇到了一个问题，即所有时间的输入都在所有项目上(如引导、模式或菜单)。

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

或添加到类选取器-carte：

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

页面外观：

​

一个

​

​

Answer 1

似乎他们给了daterangepicker类一个x-index = 3001

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

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

Answer 2

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

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