z-index 在 Angular UI Datepicker 中不起作用答案

【问题标题】：z-index not working in Angular UI Datepickerz-index 在 Angular UI Datepicker 中不起作用
【发布时间】：2017-10-02 18:51:06
【问题描述】：

In this plunk 我在 div 中有一个 Angular UI Datepicker（该 div 有橙色背景）。问题是日期选择器被截断，即使我设置了z-index: 99999。如果我从 div overflow-y:auto 中删除，则会显示 Datepicker，但是当溢出时我需要 div 滚动。如何解决这个问题？

HTML：

<div style="height:200px;padding:30px;background-color:orange;overflow-y:auto">
  <p class="input-group" style="z-index:99999">
      <input type="text" class="form-control" ng-model="dt" is-open="config.opened"
          uib-datepicker-popup popup-placement="top-left" datepicker-options="dateOptions" 
           ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()">
          <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
  </p>
</div>

Javascript：

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {

    $scope.opened = false;

    $scope.dateOptions = {
       showWeeks: false
    };

    $scope.open1 = function(){
        $scope.opened = true;
      };


});

app.directive('dir2', function () {
    return {
        restrict: 'EA',          
        scope: {
          someVar: '='
        },
        templateUrl: 'dir2.html',
        link: function (scope, element, attrs) { 

           scope.config = {};
           scope.config.opened = true;

        }
    }
});

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui

【解决方案1】：

这在tooltip、datepicker 或popover 中很常见，在这种情况下，最好选择将内容附加到body，这样当前的元素样式就无关紧要了。基本上在这种情况下，您可以通过将datepikcer-append-to-body 设置为true 来将日期选择器附加到正文。

datepicker-append-to-body="true"

不要去设置z-index，它可以通过调整一些东西来工作，但它可能会无意中破坏其他软件。

Plunker Demo

【讨论】：