En mi angular, tengo un componente desplegable. Así es como se ve:

 <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>

Aquí, en este ejemplo, el atributo del container se establece en el body y, por lo tanto, el menú desplegable se vincula con el cuerpo y la parte superior visible de cada elemento.

Ahora digamos que tengo tres capas en mi aplicación. Layer-one, layer-two and layer-three están una encima de la otra. Ahora me gustaría mostrar el menú desplegable solo en la capa dos (o imagine en la capa intermedia). Por lo tanto, me gustaría vincular este menú desplegable con la capa dos en función de la identificación, de modo que el menú desplegable sea visible en la parte superior de la layer one and two , pero no en la 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>

¿Puede alguien darme una idea o una solución de cómo puedo lograrlo?