Angular Material: Prevent Slider from Overlapping with Menu - css

Question

I am just getting started with Angular Material and experiencing the problem that the slider component overlaps with my menu.
How can I make sure the slider is displayed below the menu - is there some non-overlapping flag I can set to accomplish this?
May html code looks like this:
<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
<mat-menu #belowMenu="matMenu" [overlapTrigger]="false" yPosition="below">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
<mat-menu #afterMenu="matMenu" xPosition="after">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<mat-slider min="1" max="100" step="1" value="1"></mat-slider>
Thank you very much for your help!
Best regards, Sam

Answer 1

You could try to use flex-wrap in your styles this way:
display: flex; flex-wrap: wrap;
Here is a simple snippet adding it as an inline style but I do suggest that you add them in a separate file and reference the divs with classes.
I hope It helps you!
<div style="display: flex; flex-wrap: wrap;">
<div style="width: 100%;">
<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
</div>
<div style="width: 100%;">
<input type="range" min="1" max="100" value="50">
</div>
</div>
More information about flex and flex-wrap:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap