headerが一番上に表示されない(HTML,CSS)

今ヨガサイトを制作しているんですが、
他の部分ではヘッダーが一番上に来るんですが
スクロールすると
スライダーの方が上に表示されます。

headerが一番上に来るように表示するにはどうしたら良いでしょうか
コードを載せておきます。よろしくお願いします。
slick-sliderというjQueryライブラリを使用しています。

html

<header> <div class="list1"> <ul> <img src="/images/f-logo.png" alt=""> <li>zen place とは</li> <li>レッスン内容</li> <li>スタジオ一覧</li> <li>インストラクター</li> <li>料金と通い方</li> <li>よくある質問</li> </ul> </div> </header> CSS header { display: -webkit-flex; display: flex; -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */ align-items: center; /* 縦方向中央揃え */ -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */ justify-content: center; /* 横方向中央揃え */ position: fixed; background-color: white; margin: 0 auto; width: 100%; }

header .list1 {
margin-top: 10px;
text-align: center;
}

header .list1 img {
padding-top: 0px;
padding-right: 100px;
padding-left: 200px;
}

header .list1 li {
position: relative;
bottom: 18px;
display: inline-block;
margin: 0 50px;
}

動画部分
html

  </div>
</div>

</div> CSS .cp_cssslider { width: 1100px; height: 550px; overflow: hidden; margin: 2em auto; border: 10px solid #ffffff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); }

.cp_slide_item {
width: 1100px;
height: 600px;
float: left;
position: relative;
}

.cp_slidewrapper {
width: 200%;
/* slideの枚数×100% /
position: relative;
left: 0;
animation: slider 25s infinite ease;
/ スピード */
}

@-webkit-keyframes slider {
/* 100%を枚数で割った%に割り振る */
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

@keyframes slider {
/* 100%を枚数で割った%に割り振る */
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}