how to make a clip-path element scroll underneath a fixed element?

Question

A clip-path element does not scroll underneath a position: fixed element.

Here is the html:

<header classname="header">
I'm the header
</header>
<main>
  <h1>I'm with main</h1>
  <a classname="anchor" href="#down-here">Click Me!</a>
</main>

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}
.anchor {
  display: flex;
  max-width: 260px;
  height: 64px;
  margin-top: 46px;
  align-items: center;
  justify-content: center;
  background-color: purple;
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}

here is a codepen https://codepen.io/M-Holmes/pen/qBYrRaE.

Are they not compatible?