Components: @angular/cdk: 6.3.2 - overlay is not working as expected

[anupkrbid]

What is the expected behavior?

Expected Behaviour is the overlay should have a z-index and should show up on top

What is the current behavior?

Currently it is showing in the next line

What are the steps to reproduce?

Please check the provided link below
StackBlitz: https://stackblitz.com/edit/angular-nwwk19

What is the use-case or motivation for changing an existing behavior?

I was just trying to make a custom modal and faced this issue. Any help will be appreciated.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cdk: 6.3.2
EDIT:
Well i fixed it by adding this in my index.html
<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
But my question is if cdk is a standalone library then why we need to import a stylesheet that is angular material specific?

[crisbeto]

If you're using the CDK without Material, you can include the overlay prebuilt styles, rather than a Material theme:

@import "~@angular/cdk/overlay-prebuilt.css";

[anupkrbid]

Thanks.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}