How to move an absolute positioned element to front layer of the app? (Angular v.17)

I am having an issue with layout layers I guess.

I have a mat-dialog component, which has a form inside of it with select (custom made, not mat-select). The dropdown of the select has position absolute, but it is still being cut by mat-dialog.

Also the same type of behavior goes with mat-tabs.

I have tried to play with overflow and z-index, but as I don't actually understand the origin of the problem, I can't really blindly fix it.

The expecting result:

• no scroll in mat-dialog related to opened dropdown, but with opportunity to show itself if in the form will be more content;
• dropdown is shown with height according to its styles, overflowing the container.

Does anybody know the backdoor fot this issue?

Since you want a scrollbar inside the dialog, the dropdown should be placed on the root of the html, so the simplest option will be to.

Prefer material select, second choice is ng-select, but material has a better community and a better option in my opinion.