スライダーの上に画像を重ねて、更にその上にテキストを重ねる方法

前提・実現したいこと

※内容が分かりづらくなり、申し訳ありません。

スライダーを使って通販の商品ページを作成したいと考えているのですが、
思うように動きません。

希望とする完成イメージは下記の通りです。

各柄をスライダーに設定し、
スライダーの上に商品の形を切り抜いた覗き窓（？）のような画像を重ねて、
更にその画像の上にテキスト（柄の名称や説明文など）を重ねたいです。

覗き窓の画像は動かず、柄とテキストは連動してスライドするように設定したいです。
また、柄はサムネイルで下に表示されるようにしたいです。

重なり順としては、
①柄画像のスライダー（スライドする）
②覗き窓の画像（スライドせず、その場に固定）
③テキスト（①と一緒にスライドする）
です。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

スライダーの上に覗き窓の画像を重ねることは出来たのですが、
下記をどうすれば表現できるのかが分かりません。。

・テキストを画像の上に重ねる方法（最前面に持ってくる方法）
・文字と柄をサムネイルと連動させてスライドする方法

該当のソースコード

HTML
1<body>
2
3<div class="slider container cf">
4
5<!--覗き窓画像-->
6<div id="pattern_window">
7<img src="images/pattern_image_window.png" alt=""/>
8</div>
9
10<!--スライダー画像-->
11<div class="slider-for">
12        <div class="sp-slide"><img src="images/pattern1.jpg" alt=""></div>
13		<div class="sp-slide"><img src="images/pattern2.jpg" alt=""></div>
14		<div class="sp-slide"><img src="images/pattern3.jpg" alt=""></div>
15        <div class="sp-slide"><img src="images/pattern4.jpg" alt=""></div>
16        <div class="sp-slide"><img src="images/pattern5.jpg" alt=""></div>
17        <div class="sp-slide"><img src="images/pattern6.jpg" alt=""></div>
18</div>     
19
20<!--サムネイル画像-->
21    <div class="slider-nav-wrap">
22        <div class="slider-nav">
23            
24			<div class="sp-thumbnail"><img src="images/pattern1.jpg" alt=""></div>
25            <div class="sp-thumbnail"><img src="images/pattern2.jpg" alt=""></div>
26            <div class="sp-thumbnail"><img src="images/pattern3.jpg" alt=""></div>
27            <div class="sp-thumbnail"><img src="images/pattern4.jpg" alt=""></div>
28            <div class="sp-thumbnail"><img src="images/pattern5.jpg" alt=""></div>
29            <div class="sp-thumbnail"><img src="images/pattern6.jpg" alt=""></div>
30        </div>
31<!--サムネイルの左右矢印-->		
32        <div class="slick-nav-arrows">
33            <div class="slick-next"></div>
34            <div class="slick-prev"></div>
35        </div>
36    </div>
37</div>
38
39
40  
41
42  </body>

CSS
1@charset "utf-8";
2/* CSS Document */
3
4.cf:after {
5  content: "";
6  clear: both;
7  display: block;
8}
9
10img{
11vertical-align: bottom;
12}
13
14
15body{
16font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
17font-size: 16px;
18color: #000;
19}
20
21
22/*スマホスタイル指定*/
23.container{
24margin: 0 auto;
25}
26
27.slider{
28    position: relative;
29    max-width: 1024px;
30}
31
32.slider img{
33    max-width: 100%;
34    height: auto;
35}
36.slider .slider-nav-wrap{
37    position: relative;
38}
39.slider .slider-nav-wrap .slider-nav .slick-list{
40    padding: 0 !important;
41}
42.slider .slider-nav-wrap .slider-nav .slick-track{
43    left: 0 !important;
44    width: 100%;
45    opacity: 1;
46}
47.slider .slider-nav-wrap .slider-nav .slick-slide{
48    -webkit-transition: opacity .3s ease;
49    transition: opacity .3s ease;
50    opacity: 1;
51    padding: 5px;
52}
53.slider .slider-nav-wrap .slider-nav .slick-slide:hover{
54    opacity: .5;
55}
56.slider .slider-nav-wrap .slick-arrow{
57    position: absolute;
58    top: 50%;
59    width: 0;
60    height: 0;
61    border-style: solid;
62    -webkit-transform: translateY(-50%);
63    transform: translateY(-50%);
64}
65.slider .slider-nav-wrap .slick-prev{
66	right: 0;
67    border-width: 6px 0 6px 12px;
68    border-color: transparent transparent transparent #444444;
69}
70.slider .slider-nav-wrap .slick-next{
71    left: 0;
72    border-width: 6px 12px 6px 0;
73    border-color: transparent #444444 transparent transparent;
74}
75
76#pattern_window{
77z-index: 100;
78position: absolute;
79max-width: 100%;
80}
81
82.text{
83z-index: 200;
84position: absolute;
85max-width: 100%;
86top: 20%;
87left: 20%;
88}
89
90/*PCのスタイル指定*/
91@media (min-width: 768px){/*最小時の画面幅が768px*/
92    .slider .slider-for{
93    margin: 0 auto;
94	
95    }
96    .slider .slider-nav-wrap{
97        position: relative;
98		margin-top: 0.5%;
99            }
100    .slider .slider-nav-wrap .slider-nav .slick-list{
101        padding: 0 0 !important;
102    }
103    .slider .slider-nav-wrap .slider-nav .slick-track{
104        left: 0 !important;
105    }
106    .slider .slider-nav-wrap .slider-nav .slick-slide{
107        padding: 0;
108    }
109}
110

jQuery
1  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
2  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
3  <script type="text/javascript" src="js/slick.min.js"></script>
4
5  <script type="text/javascript">
6 $(document).ready(function(){
7    $('.slider-for').slick({
8        slidesToShow: 1,
9        slidesToScroll: 1,
10        arrows: false,
11        fade: false,
12        asNavFor: '.slider-nav'
13    });
14    $('.slider-nav').slick({
15        slidesToShow: 4,
16        slidesToScroll: 1,
17        asNavFor: '.slider-for',
18        dots: false,
19        centerMode: true,
20        focusOnSelect: true,
21        vertical: true,
22        arrows:  true,
23		vertical:false,
24        prevArrow: $('.slick-prev'),
25        nextArrow: $('.slick-next'), 
26        responsive: [
27            {
28                breakpoint: 768,
29                settings: {
30                    centerMode: true,
31                    vertical: false
32                }
33            }
34        ]
35    });
36});
37      
38  </script>
39
40

試したこと

の中に<p></p>タグを入れてCSS上でz-indexを200に指定してみたのですが、
覗き窓の下に隠れてしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

HTML
1<div class="sp-slide"><p>mojiretu</p><img src="images/pattern1.jpg" alt=""></div>

CSS
1.sp-slide {
2  position: relative;
3}
4.sp-slide > p {
5  position: absolute;
6  bottom: 1em; /* 例 */
7}
8```**動くサンプル：**[https://jsfiddle.net/7t3Lopr0/](https://jsfiddle.net/7t3Lopr0/)

投稿2018/11/19 02:12

kei344

総合スコア69407

tkinc

2018/11/20 05:31

kei344　様ありがとうございます！拝見させて頂きました。とてもイメージに近いのですが、ピンクのpattern_image_windowがpatternと同じ大きさになった時に文字が一番手前にくるように設定したいです。頂いた構造（？）で、 pattern_image_windowとpatternを同じ大きさに設定してみたのですが、文字がpattern_image_windowに隠れてしまいました。。欲を言って申し訳ありませんが、 2つの画像の大きさを同じにした場合でも文字が一番手前にくる方法をご存知でしたら教えていただけますと助かります…！宜しくお願い致します。

kei344

2018/11/20 05:53

文字列だけ載せたslickをもう一つ作って連動させるくらいしか方法が無いです。

tkinc

2018/11/20 08:00

kei344様ご返答ありがとうございます。とても勉強になります！ slick連動の方法を試してみたいと思います。ありがとうございます！

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

z-indexを利用する方法は試されましたか？

投稿2018/11/15 10:12

退会済みユーザー

総合スコア0

tkinc

2018/11/19 01:05

yoshi0819　様ご返答ありがとうございます。またお返事差し上げるのが遅くなり、申し訳ありません。アドバイス頂いたz-indexを用いた方法なのですが、 <div class="slider-for"> <div class="sp-slide"> </div> </div> の中に<p></p>タグで入れたりしてみたのですが、サムネイルに合わせてスライドはするものの、 z-index:200;（覗き窓画像が100のため、それより大きい値）にしても一番上に出てこず、困っております…。タグを入れる箇所が間違っているのでは？と思い試行錯誤したのですがどうにも分かりません…。何かご存知のことがあれば、教えて頂けますと幸いです。

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

あなたの回答