z-index 在 Angular UI 日期选择器中不起作用

Question

In this plunk 我在 div 中有一个 Angular UI 日期选择器（div 有橙色背景）。问题是 Datepicker 被截断了，即使我设置了 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;

        }
    }
});

Answer 1

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

datepicker-append-to-body="true"

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

Plunker Demo

z-index 在 Angular UI 日期选择器中不起作用

z-index not working in Angular UI Datepicker

angularjs

angular-ui

angular-ui-bootstrap