css 位置固定 z-index 不起作用

Question

我正在使用 ui-bootstrap datepicker，并且我使用 position:fixed 对其进行了自定义样式。我面临的问题是，当打开日期选择器时它位于背景后面，有什么方法可以解决这个问题。我尝试过使用 z-index
这里是fiddle link

<div ng-app="myApp">
  <div ng-controller="myController">
    <script type="text/ng-template" id="addNew.html">
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Add</h3>
          </div>
          <div class="panel-body">
            <md-tabs md-dynamic-height md-border-bottom>
              <md-tab label="date">
                <div class="form-horizontal">
                  <div class="row">
                    <div class="col-xs-8">
                        <p>&nbsp;</p>
                      <div class="row form-group">
                        <label for="dateStart" class="col-xs-3 control-label">
                          Date&nbsp;Start
                        </label>
                        <div class="col-xs-9">
                          <div class="input-group ui-datepicker">
                            <input type="text"
                                   class="form-control"
                                   name="dateStart"
                                   id="dateStart"
                                   datepicker-popup="{{dateFormat}}"
                                   ng-model="campaign.dateStart"
                                   is-open="datepickers.start"
                                   datepicker-options="dateOptions"
                                   ng-required="true"
                                   ng-click="openDatepicker($event, 'start')"
                                   close-text="Close"/>
                            <span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
                              <i class="glyphicon glyphicon-calendar"></i>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
            </md-tabs>
          </div>
        </div>
      </div>
    </script>
  </div>
</div>

var app = angular
    .module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
    .controller('myController', function ($scope, $modal) {
      $scope.showModal = function () {
        var modalInstance;
        modalInstance = $modal.open({
          templateUrl: "addNew.html",
          controller: 'myController2',
          size: 'lg'
        });
      };
      $scope.showModal();
    })
    .controller('myController2', function ($scope, $modal) {
      $scope.datepickers = {
        start: false
      }

      $scope.openDatepicker = function ($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.datepickers[which] = true;
      };

      $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
      };

      $scope.dateFormat = 'mediumDate';
    });

md-tab-content {
  min-height: 300px;
}
md-tab-content.md-no-scroll {
    overflow: auto;
}
.dropdown-menu[datepicker-popup-wrap] {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  margin-left: -150px;
  margin-top: -145px;
}
.dropdown-menu[datepicker-popup-wrap]:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
}

Answer 1

添加以下代码将解决您的问题。

.dropdown-menu[datepicker-popup-wrap]:before {
  content: '';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
}

在此处查看演示:http://jsfiddle.net/vgfyejyo/2/