Angular UI Datepickerでz-indexが機能しないDatepicker

Question

In this plunk div内にAngular UI Datepickerがあります（divはオレンジの背景です）。問題は、z-index: 99999を設定しても、Datepickerが切り捨てられることです。 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

これは、それがbodyので、現在の要素にコンテンツを追加するためのより良い選択であるような場合にtooltip、datepickerまたはpopoverで非常に一般的なケースでありますスタイリングは関係ありません。基本的にはこの場合、datepikcer-append-to-bodyをtrueに設定することによって、日付ピッカーを本文に追加することができます。

datepicker-append-to-body="true" 

がz-indexを設定するために行ってはいけない、それはいくつかのことを微調整することで動作するかもしれないが、それは意図せずにソフトウェアの他の作品を破ることができました。

Plunker Demo