質問: ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fb31c149c51fdb8f5736d4f3236c11cc.png) 今ヨガサイトを制作しているんですが、 他の部分ではヘッダーが一番上に来るんですが スクロールすると スライダーの方が上に表示されます。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/825ea6e1410ca51a8b1b2b49a4ff95ec.png) headerが一番上に来るように表示するにはどうしたら良いでしょうか コードを載せておきます。よろしくお願いします。 slick-sliderというjQueryライブラリを使用しています。 html zen place とは レッスン内容 スタジオ一覧 インストラクター 料金と通い方 よくある質問 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 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); } }
回答: CSSでheaderに`z-index: 100;`を指定