React/CSS: MUI button flows over fixed position header-CodePudding

I am trying to get the Material UI button NOT to flow OVER my header which is in fixed position. For some reason or another I cannot get it to flow 'under' my header bar. Please find the simplified code below. FYI my current react project where I have this problem renders the header via the routing in the index.js file but that should matter in terms of the css, right?

Code:

import { Button } from "@mui/material";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div className="Header">Henlo</div>
      <div className="Randomdiv">
        <Button variant="contained">Sure</Button>
      </div>
    </div>
  );
}

export default App;

.App {
  background-color: rgb(172, 172, 172);
  height: 100%;
  min-height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 55px;
  color: #000000;
  overflow: hidden;
}

.Header {
  position: fixed;
  top: 0px;
  padding-left: 10px;
  height: 55px;
  width: 100%;
  background-color: rgb(0, 0, 0);
  text-align: left;
  color: whitesmoke;
  overflow: hidden;
}

.Randomdiv {
  height: 250px;
  width: 100%;
  background-color: cornflowerblue;
}

CodePudding user response：

Try adding

z-index property inside .header class

.Header {
   .....
  z-index: 99;
}