slickを用いた画像スライドで画像の前に文字を表示したい。

・やりたい事
slickを使うスライドショーの前に固定の文字を表示させたい。

・ダメなところ
①positionプロパティでz-indexを指定しようとすると画像巨大化してしまい、
max-widthで設定しなおしたがそれでも要素の範囲外に飛び出してしまう。
②そもそも文字がスライドの文字の前に来ない。
③以上の設定でやると無限ループんはずのスライドが一定のところで消えてしまう。

html
1{% extends 'index.html' %}
2
3{% block container %}
4    <div class="top_slick" id="top">
5        <top_content/>
6        <div class="speech">
7            <h1>If it look fun, just do it </h1>
8        </div>
9
10    </div>
11    <div>
12        
13    </div>
14    {% raw %}
15        <script type="text/x-template" id="top_content-template">
16            <div class="slider" >
17                <ul v-for="item in img_url">
18                    <li >
19                        <img :src="imagePath(item)" :alt="img(item)">
20                    </li>
21                </ul>
22            </div>
23        </script>
24    {% endraw %}
25    <script>
26        Vue.component('top_content',{
27            template:'#top_content-template',
28            /*コンポーネント内のdataは関数でないといけないのでこの形*/
29            data:function(){
30                return{
31                    img_url:[1,2,3,4,5,6,7,8,9,10,11,12,13]
32                }
33            },
34            methods:{
35                imagePath(item){
36                    let path = `../static/img/${item}.jpg`
37                    return path
38                },
39                img:function(item){
40                    let name = item + "の画像"
41                    return name
42                },
43
44            },
45            /*createdプロパティ←コンポーネントの初期化処理*/
46            
47            
48        });
49        
50
51        new Vue({
52            el:'#top'
53        })
54        //下記は画像のスライド用の関数（slickのやつ
55        $(document).ready(function () {
56            $('.slider').slick({
57                infinite: true,
58                arrows: true, 
59                dots: true, 
60                autoplay: true, 
61                Speed: 500, 
62                fade:true,
63                accessibility:true
64
65            });
66        });
67    </script>
68    
69{% endblock %}

css
1body{
2  background-image: url("https://www.beiz.jp/images_M/watercolor/watercolor_00395.jpg");
3  background-position: center center;
4  background-repeat: no-repeat;
5  background-attachment: fixed;
6  background-size: cover;
7  background-color: #464646;
8}
9
10
11ul{
12  list-style: none;
13  margin: 0;
14  padding: 0;
15}
16
17
18.side_decolation ul{
19  display: block;
20  text-decoration: none;
21  font-family:cursive ;
22}
23
24.top_slick{
25  position: relative;
26}
27
28.speech{
29  position: absolute;
30  top: 50%;
31  left: 50%;
32  z-index: 150;
33
34}
35
36.contents{
37  background-color: white;
38  box-shadow:0px 0px 10px 5px white;
39  border:1px solid black;
40}
41
42.slider {  
43  position: absolute;
44  margin: 0 auto;
45  z-index: 0;
46}
47
48.slick-slide{
49  height:auto!important;
50}
51.slick-next{
52  right:0!important;
53}
54.slick-prev{
55  left:0!important;
56}
57.slick-arrow{
58  z-index:2!important;
59}
60
61
62.slider img{
63  display: block;
64  max-width: 100%;
65}
66
67
68
69a{
70  text-decoration: none;
71}
72
73.hover9 {
74  display: block;
75  position: relative;
76}
77/*下記が変わり始まる前の設定。最初にこの状態になろうとした後したのカーソルが乗った状態に変化する*/
78.hover9::after {
79  position: absolute;
80  content: '';
81  bottom: 0;
82  left: 0;
83  width: 0;
84  height: 10px;
85  background: #2196F3;
86  opacity: 0.5;
87  transition: all 0.3s ease 0s; /*変化時間*/
88}
89/*下記カーソルがリンクに置いたと認知する記述*/
90.hover9:hover {
91  cursor: pointer;
92}
93/*下記はカーソルを置いた時に上で設定された状態にどのあたりまで変化するかを表す*/
94/*今回はリスト項目の後ろバックカラー*/
95.hover9:hover::after {
96	width: 100%;
97  height: 10%;
98}
99
100
101h1{
102  color:lightgray;
103  font-size: 36pt;
104  margin: 0;
105}
106p{
107  font-size: 14pt;
108}
109

わかる方いましたら教えていただきたいです。よろしくお願い致します。

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

回答1件

自己解決

cssで親要素にposition:relative;で基準を決めてposition:absolute;で位置を決めようとしていたのですができなかったのでposition:retive;を消してposition:absoluteだけでやるとなぜか文字も前面にでて画像のはみ出しなんかもなくなりました。
毎回position:relative;を使うの良くないと思いました。

投稿2021/08/26 06:48

con2319

総合スコア52