In my angular, I have a dropdown component. Here is how it looks like:

<div dropdown  placement="bottom left" #dropdown="bs-dropdown" [autoClose]="true" 
  [insideClick]="true" [container]="body">
  <a class="templates-icon" dropdownToggle (click)="toggleTextTemplates();">
    <i #one class="ic-text-templates" aria-hidden="true"></i>
  </a>
  <ng-container *ngIf="toggle" >
    <div *dropdownMenu class="templates-container dropdown-menu"
    role="menu" aria-labelledby="button-basic">      
  </ng-container>
</div>

Here in this example, container attribute is set to body and therefore the dropdown is bind with the body and visible top of each element.

Now let say I have three layer in my app. Layer-one, layer-two and layer-three and they are top of each other. Now I would like to display the dropdown only on layer-two (or imagine in middle layer). So I would like to bind this dropdown with layer-two based on id, so that drodown will be visible on top of layer one and two, but not the layer three:

<div id="layer-one"> 
  some element 1
  <div id="layer-two"> 
    some element 2
    <div id="layer-three"> some element 3</div>
  </div>
</div>

Can someone please give me an idea, or solution how I can achieve that?