teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問CSSの重複表示の挙動

編集履歴

質問編集履歴

2

変更

2019/01/20 09:40

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
@@ -1 +1 @@
1
- JQueryの画像切替によるページ数表示
1
+ CSSの重複表示の挙動
test CHANGED
@@ -1,12 +1,8 @@
1
- 質問❶
1
+ 以下のコードで画像のような状態になります。画像を押すと分子が変わります。その挙動については問題ありません。
2
2
 
3
- 以下のコードを画像を途切れることなく表示できるのですが、画像の中にページ数をJQueryのtextを使用し、HTML上に表示させたいのですが、何も表示されませんどこが間違っておりますか。
3
+ 問題は分数の表示が画像の上にこないことです。重ねて表示されるようにz-indexをつけていますが、cssのleftの数値を変更しても画像と重なってくれません。
4
4
 
5
5
 
6
-
7
- 質問❷
8
-
9
- 表示の際ページ数は画像の上に表示させたいので、Z-indexを使用しているのですが画像の中には表示されません間違っている点のご指摘をお願いします。
10
6
 
11
7
 
12
8
 
@@ -136,7 +132,7 @@
136
132
 
137
133
  top: 0;
138
134
 
139
- left: 20;
135
+ left: 70;
140
136
 
141
137
  z-index: 10;
142
138
 
@@ -145,3 +141,7 @@
145
141
 
146
142
 
147
143
  ```
144
+
145
+
146
+
147
+ ![イメージ説明](c85e5617db443f9934bba4ced81e47f9.png)

1

質問の編集

2019/01/20 09:40

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,16 @@
1
- 以下のようなコードがあり、画像を途切れることなく切り替えることができます。
1
+ 質問❶
2
2
 
3
- これだと画像のページ数がわからないので、画像の四隅にでも1/4等の情報を表示したいと思いますが、
3
+ 以下のコードを画像を途切れることなく表示できるのですが、画像の中にページ数をJQueryのtextを使用し、HTML上に表示させたいのですが、何も表示されませんどこが間違っておりますか。
4
4
 
5
+
6
+
7
+ 質問❷
8
+
5
- どのように実装すれば良いでしょうか。イメージがわきません。アプローチ方なども含めてご教授お願いします
9
+ 表示の際ページ数は画像の上に表示させたいので、Z-indexを使用しているのですが画像の中には表示されません間違っている点のご指摘をお願いします。
6
10
 
7
11
 
8
12
 
9
13
  ```HTML
10
-
11
- <!doctype html>
12
14
 
13
15
  <html>
14
16
 
@@ -34,55 +36,29 @@
34
36
 
35
37
  <body>
36
38
 
37
- <!DOCTYPE html>
38
39
 
40
+
39
- <html lang="ja">
41
+ <div class="slide-wrapper">
40
42
 
41
43
 
42
44
 
43
- <head>
45
+ <ul class="slides">
44
46
 
45
- <meta charset="utf-8">
47
+ <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"><span class="page"></span></li>
46
48
 
47
- <title>Progate</title>
49
+ <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"><span class="page"></span></li>
48
50
 
49
- <link rel="stylesheet" href="stylesheet.css">
51
+ <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"><span class="page"></span></li>
50
52
 
51
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
53
+ <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"><span class="page"></span></li>
52
54
 
53
- </head>
55
+ </ul>
54
56
 
55
57
 
56
58
 
57
- <body>
59
+ </div>
58
60
 
59
- <div class="slide-wrapper">
60
-
61
-
62
-
63
- <ul class="slides">
64
-
65
- <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
66
-
67
- <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
68
-
69
- <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
70
-
71
- <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
72
-
73
- </ul>
74
-
75
-
76
-
77
- </div>
78
-
79
- <script type="text/javascript" src="script.js"></script>
61
+ <script type="text/javascript" src="script.js"></script>
80
-
81
- </body>
82
-
83
-
84
-
85
- </html>
86
62
 
87
63
  </body>
88
64
 
@@ -104,9 +80,11 @@
104
80
 
105
81
 
106
82
 
83
+ var clickedIndex = $('.slide').index($(this)) + 1;
84
+
85
+ var page = clickedIndex + '/' + $('.slide').length;
107
86
 
108
87
 
109
- var clickedIndex = $('.slide').index($(this)) + 1;
110
88
 
111
89
  if ($('.slide').length == clickedIndex) {
112
90
 
@@ -114,18 +92,56 @@
114
92
 
115
93
  } else {
116
94
 
117
-
118
-
119
95
  $('.slide').eq(clickedIndex).addClass('active');
120
96
 
121
97
  }
122
98
 
99
+ $('.page').text(page);
123
100
 
101
+ // $(".page").text("変更後の文章");
124
102
 
125
103
  });
126
104
 
127
105
  });
128
106
 
107
+ ```
108
+
109
+
110
+
111
+ ```CSS
112
+
113
+ .slides {
114
+
115
+ padding: 0;
116
+
117
+ }
118
+
119
+
120
+
121
+ .slide {
122
+
123
+ display: none;
124
+
125
+ position: relative;
126
+
127
+ z-index: 0;
128
+
129
+ }
130
+
131
+
132
+
133
+ .slide span {
134
+
135
+ position: absolute;
136
+
137
+ top: 0;
138
+
139
+ left: 20;
140
+
141
+ z-index: 10;
142
+
143
+ }
144
+
129
145
 
130
146
 
131
147
  ```