How do I overlay a MatDialog inside a specific div and not the whole document?

Question

I am using Angular 15 and Material Angular package and have a usecase where I want to restrict a MatDialog to only overlay a specific section of the webpage and not the whole document.

Out of the box it seems MatDialog overlays on the whole document like this:

What I want is the MatDialog to behave like this and be restricted to the 'content' section of my webpage:

I looked into the Dialog class from the Material CDK which has a container property in DialogRef but it did not seem to be the thing I am looking for.

I am pretty sure this must be doable as it seems a pretty common usecase but have not been able to find a solution for it.

Any guidance would be much appreciated.

Thanks