teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問slickのz-index値を変更したい

編集履歴

質問編集履歴

5

追記を見やすく

2019/02/16 13:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,11 @@
20
20
 
21
21
 
22
22
 
23
- （追記）すみません。slickが問題なのではなく、dropdownの親要素のfixedにposition: fixed;がついていたことが原因のようでした。（fixedとったら上に表示された）もう一回やり方を調べてみようと思いますが、解決策がわかる方がいらっしゃれば教えていただきたいです。
23
+ **（追記）すみません。slickが問題なのではなく、dropdownの親要素のfixedにposition: fixed;がついていたことが原因のようでした。（fixedとったら上に表示された）もう一回やり方を調べてみようと思いますが、解決策がわかる方がいらっしゃれば教えていただきたいです。**
24
+
25
+
26
+
27
+
24
28
 
25
29
 
26
30
 

4

fixedの要素を追記しました！

2019/02/16 13:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,15 @@
20
20
 
21
21
 
22
22
 
23
+ （追記）すみません。slickが問題なのではなく、dropdownの親要素のfixedにposition: fixed;がついていたことが原因のようでした。（fixedとったら上に表示された）もう一回やり方を調べてみようと思いますが、解決策がわかる方がいらっしゃれば教えていただきたいです。
24
+
25
+
26
+
23
27
  ```HTML
24
28
 
25
29
  <div class="wrapper">
30
+
31
+ <div class="fixed">
26
32
 
27
33
  <p id="toggle" class="toggle">ここをクリックでドロップダウン</p>
28
34
 
@@ -41,6 +47,8 @@
41
47
  </ul>
42
48
 
43
49
  </div>
50
+
51
+ </div>
44
52
 
45
53
  </div>
46
54
 
@@ -87,6 +95,12 @@
87
95
  }
88
96
 
89
97
 
98
+
99
+ .fixed {
100
+
101
+ position: fixed;
102
+
103
+ }
90
104
 
91
105
  .category {
92
106
 

3

コードを追記しました。

2019/02/16 13:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,10 +10,130 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+ コードをそのまま載せるわけにはいかなかったので、簡略化して書いてしまっていて申し訳ないですが、、
16
+
13
17
  どなたかslickのz-index値を変更する方法を知っていれば教えていただきたいです。
14
18
 
15
19
  よろしくお願いいたします。
16
20
 
17
21
 
18
22
 
23
+ ```HTML
24
+
19
- 値を変更したいだけなので、特にソースコードはないのですが、ご了承ください。
25
+ <div class="wrapper">
26
+
27
+ <p id="toggle" class="toggle">ここをクリックでドロップダウン</p>
28
+
29
+ <div class="dropdown">
30
+
31
+ <ul class="category">
32
+
33
+ <li class="categoryItem">カテゴリー１</li>
34
+
35
+ <li class="categoryItem">カテゴリー２</li>
36
+
37
+ <li class="categoryItem">カテゴリー３</li>
38
+
39
+ <li class="categoryItem">カテゴリー４</li>
40
+
41
+ </ul>
42
+
43
+ </div>
44
+
45
+ </div>
46
+
47
+ <div id="slide" class="contents"><!--このスライド部分が画面全体で、その上にドロップダウンメニューが表示されるイメージ-->
48
+
49
+ <div>
50
+
51
+ <p>スライド１</p>
52
+
53
+ </div>
54
+
55
+ 　　　<div>
56
+
57
+ <p>スライド２</p>
58
+
59
+ </div>
60
+
61
+ 　　　<div>
62
+
63
+ <p>スライド３</p>
64
+
65
+ </div>
66
+
67
+ 　　　<div>
68
+
69
+ <p>スライド４</p>
70
+
71
+ </div>
72
+
73
+ </div>
74
+
75
+ ```
76
+
77
+
78
+
79
+ ```CSS
80
+
81
+ .wrapper {
82
+
83
+ width: 100%;
84
+
85
+ position: relative;
86
+
87
+ }
88
+
89
+
90
+
91
+ .category {
92
+
93
+ width: 95%;
94
+
95
+ padding: 10px 20px;
96
+
97
+ box-shadow: 2px 2px 2px 3px rgba(0,0,0,0.1);
98
+
99
+ background: rgba(255,255,255,0.5);
100
+
101
+ position: absolute;
102
+
103
+ top: 88px;
104
+
105
+ z-index: 1001;
106
+
107
+ display: none;
108
+
109
+ }
110
+
111
+
112
+
113
+ .contents {
114
+
115
+ width: 100%;
116
+
117
+ height: 100;
118
+
119
+ ```
120
+
121
+
122
+
123
+ ```JS
124
+
125
+ $('#slide').slick({
126
+
127
+ slidesToShow: 1,
128
+
129
+ slidesToScroll: 1,
130
+
131
+ dots: false,
132
+
133
+ arrows: false,
134
+
135
+ zIndex: 1000
136
+
137
+ });
138
+
139
+ ```

2

2019/02/16 11:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

1

2019/02/16 09:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes