slickのz-index値を変更したい

##タイトル通りですが、slickのz-index値を変更したいです。

slick-sliderのz-indexをcssで1000に変えても、position: absolute ;を設定している要素(この要素をスライダーの上に配置している)の上にかぶってしまい、z-indexをつけたい要素につけられず困っています。
slick-sliderのz-indexを-1にすると上に配置したい要素が上に来てくれるのですが、
これだとslickが動かなくなってしまい、やりたいことができません。

コードをそのまま載せるわけにはいかなかったので、簡略化して書いてしまっていて申し訳ないですが、、
どなたかslickのz-index値を変更する方法を知っていれば教えていただきたいです。
よろしくお願いいたします。

（追記）すみません。slickが問題なのではなく、dropdownの親要素のfixedにposition: fixed;がついていたことが原因のようでした。（fixedとったら上に表示された）もう一回やり方を調べてみようと思いますが、解決策がわかる方がいらっしゃれば教えていただきたいです。

HTML
1<div class="wrapper">
2   <div class="fixed">
3     <p id="toggle" class="toggle">ここをクリックでドロップダウン</p>
4     <div class="dropdown">
5        <ul class="category">
6           <li class="categoryItem">カテゴリー１</li>
7           <li class="categoryItem">カテゴリー２</li>
8           <li class="categoryItem">カテゴリー３</li>
9           <li class="categoryItem">カテゴリー４</li>
10        </ul>
11     </div>
12   </div>
13</div>
14<div id="slide" class="contents"><!--このスライド部分が画面全体で、その上にドロップダウンメニューが表示されるイメージ-->
15     <div>
16       <p>スライド１</p>
17     </div>
18　　　<div>
19       <p>スライド２</p>
20     </div>
21　　　<div>
22       <p>スライド３</p>
23     </div>
24　　　<div>
25       <p>スライド４</p>
26     </div>
27</div>

CSS
1.wrapper {
2  width: 100%;
3  position: relative;
4}
5
6.fixed {
7  position: fixed;
8}
9.category {
10  width: 95%;
11  padding: 10px 20px;
12  box-shadow: 2px 2px 2px 3px rgba(0,0,0,0.1);
13  background: rgba(255,255,255,0.5);
14  position: absolute;
15  top: 88px;
16  z-index: 1001;
17  display: none;
18}
19
20.contents {
21  width: 100%;
22  height: 100;

JS
1$('#slide').slick({
2    slidesToShow: 1,
3    slidesToScroll: 1,
4    dots: false,
5    arrows: false,
6    zIndex: 1000
7  });

yu-smc

2019/02/16 09:39

z-indexはどんな条件でも重なり順を指定できるプロパティではないので、ソースコードがないとなんとも言えないです。。

退会済みユーザー

2019/02/16 11:57

そうですよね。。コードを簡単ではありますが、記入したのですが、何かわかりますでしょうか？？

行動規範の内容に同意します

回答1件

ベストアンサー

slick-sliderのz-indexを1000にしたい理由がよくわかっていないのですが、
実現したいことが、ドロップダウンメニュー > カルーセルにしてかつカルーセルをうごかす、ということであれば、
dropdownクラスのdiv要素はidがslide要素の中に書き、slide要素をposition:relative, dropdown要素をposition:absoluteにして調整すればいけそうです。

もしやりたいことが違うようであれば教えてください。

投稿2019/02/16 12:24

yu-smc

総合スコア610

退会済みユーザー

2019/02/16 13:22

回答ありがとうございます！ z-index: 1000;は数字を大きくすればslickに勝てるかなと思い、書いたのがそのまま残ってしまったものです、失礼しました。実際、「dropdownクラスのdiv要素はidがslide要素の中に書き」を実行してみたのですが、 slideの中に書くことで、dropdownもスライド要素と思ってしまったのか表示が崩れてしまいました。。 slideの中に入れずに書くのは難しいのでしょうか？また、もしかしたらslick.cssのなかにtransformがあるのでそれが原因でz-indexが効かないのかもと思ったり。だからと言って解決策はわからないのですがね。。