CSS – dropdown view on top of a dialog

Hi,
I am building an Angular application, on which I have a dialog popup for creating a Quiz. Inside that dialog, I have a forum for providing the Quiz details,
One of these details is the list of the users to assign the Quiz to:
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-04-14/1586860545-477995-image.png]

In order to do this, I am using [ng-bootstrap](https://ng-bootstrap.github.io/#/components/dropdown/examples)

`
<div id=”user-selection-container” ngbDropdown>
<button class=”btn btn-outline-primary” ngbDropdownToggle>{{ getUserSelectionButtonText() }}</button>
<div id=”user-selection-dropdown” ngbDropdownMenu>
<app-users-chooser (selectedUsersChanged)=”updateSelectedUsers($event)”></app-users-chooser>
</div>
</div>
`

The “app-users-chooser” is a component that displays the list of users to choose from.

The issue is, when I open this drop-down, it appears “inside” the dialog:
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-04-14/1586860605-576216-image.png]

How can I make this drop-down to appear in from of everything?
I tried to change the z-index, but it did not help.
Maybe there is a better way to achieve this?
I would be glad for any helpsuggestions.

Also in #CSS _↴