title: css position fixed z-index not working
body: <p>I am using ui-bootstrap datepicker and I have custom styled it with <code>position: fixed</code>. The problem I am facing is that when open datepicker it is behind the backdrop, is there any way to fix this. I have tried using the <code>z-index</code><br>
  <strong>here is the <a href="http://jsfiddle.net/salalaslam/7v6wdhsz/" rel="nofollow">fiddle link</a></strong></p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div ng-controller="myController"&gt;
      &lt;script type="text/ng-template" id="addNew.html"&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;Add&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;md-tabs md-dynamic-height md-border-bottom&gt;
                &lt;md-tab label="date"&gt;
                  &lt;div class="form-horizontal"&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="col-xs-8"&gt;
                          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
                        &lt;div class="row form-group"&gt;
                          &lt;label for="dateStart" class="col-xs-3 control-label"&gt;
                            Date&amp;nbsp;Start
                          &lt;/label&gt;
                          &lt;div class="col-xs-9"&gt;
                            &lt;div class="input-group ui-datepicker"&gt;
                              &lt;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"/&gt;
                              &lt;span class="input-group-addon" ng-click="openDatepicker($event, 'start')"&gt;
                                &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                &lt;/md-tab&gt;
                &lt;md-tab label="other tabs"&gt;&lt;/md-tab&gt;
                &lt;md-tab label="other tabs"&gt;&lt;/md-tab&gt;
                &lt;md-tab label="other tabs"&gt;&lt;/md-tab&gt;
                &lt;md-tab label="other tabs"&gt;&lt;/md-tab&gt;
              &lt;/md-tabs&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/script&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br></p>
  
  <pre><code>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';
      });
  </code></pre>
  
  <p><br></p>
  
  <pre><code>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);
  }
  </code></pre>