在使用ng-zorro组件库的过程中发现在一些有弹出层的组件中，有时会出现弹出层和弹出定义容器发生分离的现象，例如: Select、Select-tree、Datepicker等组件。

后来在看Tooltip组件文档时看到了这样一段文字

具体的含义就是cdk/overlay 默认只会监听body的滚动，如果我们在具体的某个子容器(非body)中使用select,如果子容器发生了滚动,这时候就会发生弹出定位异常的现象，发生位置错位。解决方法就是:在子容器上添加 cdkScrollable指令。

// 需要引入 ScrollingModule
import {ScrollingModule} from '@angular/cdk/scrolling'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NzTreeSelectModule,
    ScrollingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// 在发生滚动的子容器上添加 cdkScrollable
<div class="page-container" cdkScrollable>
  <div style="height: 500px;" class="demo-box">

  </div>
  
  <div style="height: 500px;" class="demo-box">
    <div style="width: 200px;">
      组织机构: <nz-tree-select 
      [nzNodes]="orgTreeNodes"  
      [nzAllowClear]="true" 
      nzPlaceHolder="请选择" 
      [nzDropdownStyle]="{ 'max-height': '300px' }" 
      [nzShowSearch]="true" 
      [nzHideUnMatched]="true"
      style="width: 200px;">
    </nz-tree-select>
    </div>
    
  </div>
  
  <div style="height: 500px;" class="demo-box">
  
  </div>
</div>