I have the problem with the mix of z-index and position on CSS

I cannot fix the down directed in the main page although I set it with position and z-index properties. Does anyone know how to fix it in the first view ? *******************************************************************************************************************************************************************************************************************************************************************

css

.box {
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: fixed
}
.box span {
    display: fixed;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    transition: all .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 1;
    animation: animate 2s infinite;
}

.box span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -2;
}
.box span:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #d3d3d3;
  transition: all .3s;
  z-index: -1;
}
.box span:hover {
  color: #fff;
}
.box span:hover:before {
  width: 100%;
}
.box span:nth-child(1) {
    opacity: 0.3;
    z-index: 1;
}
.box span:nth-child(2) {
    opacity: 0.5;
    z-index: 1;
}

index.html

<section id="slideshow">
    <div class="slick">
        <div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
        <div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
        <div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
    </div>
</section>

<div class="box">
    <span onclick="scrollDown()"></span>
    <span onclick="scrollDown()"></span>
    <span onclick="scrollDown()"></span>
</div>