当页面向下滚动时，模态窗口覆盖div不覆盖整个页面

Question

我有一个模态窗口叠加部分css，如下所示：

.ng-modal-overlay {  position:absolute;  z-index:9999;  top:0;  left:0; width:100%;  height:100%;  background-color:#000000;  opacity: 0.9;}

但是当页面向下滚动时，它不能覆盖整个页面。用于angular js的模式自定义指令中。

屏幕截图：

编辑1：

定位后的屏幕截图：相对

编辑2：HTML模板代码：

$templateCache.put('views/modal-dialog.html',
"<div class=\"ng-modal\" ng-show=\"show\">\n" +
"   <div class=\"ng-modal-overlay\" ng-click = \"modal.hideModal()\"></div>\n" +
"       <div class=\"ng-modal-dialog\" ng-style=\"dialogStyle\">\n" +
"           <div class=\"ng-modal-close\" ng-click = \"modal.hideModal()\">X</div>\n" +
"               <div class=\"ng-modal-dialog-content\" >\n" +
"               Segmentations of {{product.productName.value}}\n" +
"               <br>\n" +
"                   <label for=\"custBeliefSys\"> Cust. Belief Sys </label><br>" +
"                   <div >\n" +
"                       <select name = \"custBeliefSys\" multiple style=\"width: 100%\" ng-options=\"e as e.Id for e in modal.custBeliefSys track by e.Id\" ng-model=\"modal.selectedCustBeliefSys\">\n" +        
"                       </select>\n" +
"                   </div>\n" +
"               <br>\n" +
"                   <label for=\"hcpSegment\"> HCP Segment </label><br>" +
"                   <div >\n" +
"                       <select name = \"hcpSegment\" multiple style=\"width: 100%\" ng-options=\"e as e.Id for e in modal.hcpSegment track by e.Id\" ng-model=\"modal.selectedHcpSegment\">\n" +        
"                       </select>\n" +
"                   </div>\n" +
"       </div>\n" +
"       </div>\n" +
"</div>\n" 
);

Code for CSS:

    .ng-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:relative;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  background-color:#000000;
  opacity: 0.9;
}
.ng-modal-dialog {
  /* A centered div above the overlay with a box shadow. */
  z-index:10000;
  position: absolute;
  width: 50%; /* Default */

  /* Center the dialog */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);

  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
  padding:10px;
  text-align: left;
}
.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}
.modal-heading {
  background: #eaeaea;
  text-align: center;
  padding: 10px;
}