I am creating a page that is a slideshow with several images and a parallax scrolling effect. The scrolling is working fine, however I want to have the buttons for the music control fixed on the top, however the buttons will not stay fixed no matter what I do.

my images are set up like this:

```
.first {
  display: flex;

  position: relative;
  z-index: -1;
  height: 100vh;
  justify-content: center;
  align-items: center;
  transform: translateZ(-1px) scale(2);
background-image: url('./orange.png');
background-size: 100% 100%;

}

```

And my header is called 'dock' and has the following code

```
<div className="  dock">
    {" "}
    <button className="button" onClick={Playit}>
      Play Audio
    </button>{" "}

    <button className="button2" onClick={Stopit}>
      Pause Audio
    </button>
  </div>
CSS 
.dock {
 top: 0;
  text-align: center;
  z-index: 99;
position: fixed !important;
}

```

This is my first time working with any kind of scroll effects. I am unsure why the two buttons on the top will not remain fixed.
Any advice you have will be appreciated.

 A codesandbox is available here [link](https://codesandbox.io/s/determined-gareth-tm9g5?file=/src/dock.js)

 Thank you in advance.