画像の上に表示できない。z-index,position.....

前提・実現したいこと

上記のようにheader, copyを画像の上に載せたいですが、実際は下記のような状況です。

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

問題:headerが画像の上に載らない。
z-index,position: absolute,などをしても乗らない

該当のソースコード

header,
1
2    <header class="header">
3        <div class="header-inner header-fixed">
4                    <h1 id="logo">Cresta Design</h1>
5                   
6                    <nav class="header-nav">
7                            <ul class="header-list">
8                                <li class="list-item"><a href="#">Concept</a></li>
9                                <li class="list-item"><a href="#">Service</a></li>
10                                <li class="list-item"><a href="#"> Works</a></li>
11                                <li class="list-item"><a href="./Contact.html">Contact</a></li>
12                            </ul>
13                    </nav>
14                    <button class="burger-btn">
15                        <span class="bar-bar_top"></span>
16                        <span class="bar-bar_mid"></span>
17                        <span class="bar-bar_bottom"></span>
18                    </button>
19        </div>
20            
21           
22           
23            <div class="image-inner">
24                <div class="fv">
25                       <ul class="slider">
26                           <li><img src="./image/fv-bgi_01@2x.jpg" alt="1枚目"></li>
27                           <li><img src="./image/fv-bgi_02@2x.jpg" alt="2枚目"></li>
28                           <li><img src="./image/fv-bgi_03@2x.jpg" alt="3枚目"></li>
29                       </ul>
30                </div>
31                <div class="image-message">
32                        <p>Design for Smile. <br class="sp-br">快適なオフィスを  デザインする</p>
33                </div>
34            </div>
35        </div>
36        
37    </header>

scss
1.header{
2    padding: 19px 30px;
3    box-sizing: border-box;
4    width: 1440px;
5    height: 752px;
6    position: absolute;
7    top: 0;
8    left: 0;
9    z-index: 1;
10    /*ヘッダーfixed対応*/
11    transition: .3s;
12    .header.fixed{
13        position: fixed;
14        background: #282f35;
15        padding: 30px;
16        width: 100%;
17        transition: .3s;
18        
19    }
20
21
22    @include overTab{
23        .header{
24            padding: 30px 4vw;
25        }
26    }
27    
28.header-inner{
29    display: flex;
30    justify-content: space-between;
31    align-items: center;
32    max-width: 1200px;
33    margin: 0 auto;
34    
35
36    #logo{
37        padding-left: 120px;
38        margin-top: 19px;
39        font-family: 'Noto Serif';
40        font-size: 2.6rem;
41        color: #fff;
42        }
43    
44    }
45
46    .header-nav{
47       
48        @include overTab{
49            display: none;
50            position: fixed;
51            top: 0;
52            left: 0;
53            width: 100%;
54            height: 100vh;
55            background-color: #282f35; 
56         }
57    
58
59        .header-list{
60                display: flex;
61                justify-content: space-between;
62                align-items: center;
63                margin-right: 10px;
64
65            .list-item{
66                display: flex;
67                justify-content: space-between;
68                align-items: center;
69                >a {
70                    text-transform:inherit;
71                    font-size: 16px;
72                    color: #fff;
73                    transition: .3s;
74                    font-weight: bold;
75                    font-style: italic;
76                }
77                + .list-item{
78                    padding-left: 30px;
79
80                    }
81                }
82
83            }
84        }
85    }
86
87/*ボタン*/
88.burger-btn{
89    display: flex;
90}
91

main
1.image-inner{
2    .fv{
3        height: 100vh;
4        min-height: 550px;
5        position: relative;
6        background-image: url(../../image/fv-bgi_01@2x.jpg);
7        background-position: center;
8        background-size: cover;
9        background-repeat: no-repeat;
10        .img{
11            height: 100vh;
12            object-fit: cover;
13        }
14        @include overTab{
15            width: 100%;
16        }
17
18    }
19    
20
21.image-message{
22    position: absolute;
23    top: 400px;
24    left: 177px;
25    padding-bottom: 170px;
26
27        > p {
28            font-size: 5rem;
29            line-height: 1.4;
30            color: #fff;
31
32        }
33
34            .sp-br{
35                display: block;
36                
37                @include overTab{
38                    .sp-br{
39                        display: none;
40                        
41                    }
42                }
43
44            }
45        }
46}
47

//スッティキーヘッダー
$(function(){
  var $win=$(window),
  $fv=$('.fv'),
  $header=$('.header'),
  fvHeight='$fv.(outerHeight)';
  fixedClass='fixed';

  $win.on('load scroll', function(){
    var value=$(this).scrollTop();
    if($win.width()>768){
      if(value > fvHeight){
        $header.addClass(fixedClass);
      
    }else{
      $header.removeClass(fixedClass);
    }
  } 

  });
}); 


//スライダー
$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  speed: 1000,
  cssEase: 'linear'
});

試したこと

z-index,position: absolute,などをしても乗らない

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

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

回答1件

ベストアンサー

sassの@mixin overTabが無いので再現できませんが
.header.fixed{が.header-fixed{ではないでしょうか。
またz-indexを追加すると前面に来ると思います。

css
1    .header.fixed{
2         ↓
3    .header-fixed{
4        position: fixed;
5        background: #282f35;
6        padding: 30px;
7        width: 100%;
8        transition: .3s;
9        z-index: 99; /*追加*/
10    }

投稿2021/08/06 12:38

webgoto

総合スコア1293

free_teku

2021/08/06 12:52

できました。本当にありがとうございます！

free_teku

2021/08/06 13:04

因みに、slickについてもお伺いしたいのですが、可能でしょうか？今、fvの画像が3枚あり、それらがslickとfadeで徐々に変わり続けるようにしたいです。可能でしょうか？

webgoto

2021/08/06 13:10

slickとfadeで徐々に変わるというのはどういう状態でしょうか。

free_teku

2021/08/06 13:31 編集

動画を送りたいのですが、遅れずに困っています。因みに、jqコードは添付いたしました。コードを見てわかりますか？

webgoto

2021/08/06 13:41 編集

slickプラグインは正しくfadeで切り替わっているようです。

free_teku

2021/08/06 13:42

本当ですか？私のサイトでは、動作ができず、3枚が立て並びになります。webgotoさんはどこでどのように調べたのですか？教えていただけると幸いです。m(__)m

webgoto

2021/08/06 13:50 編集

私のローカルでコードを動作させました。 slickの動作には最低でも下記3種を<head>等で読み込む必要があります。(jQuery, slickのjs, slickのcss) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> またsliderのHTMLより下で $('.slider').slick() を実行する必要があります。（上部に書くなら$(function(){ })でくくる）動作しない原因として思い当たるのはとりあえずこのあたりです。

free_teku

2021/08/06 14:03

教えていただきありがとうございます。上記3つは添付していました。最後の部分「sliderのHTMLより下で $('.slider').slick() を実行する必要があります。（上部に書くなら$(function(){ })でくくる）」ですが、HTMLとjQはそれぞれの言語（ファイル）なのですが、一応jqの中では表題の通り一番下で記入していますが、、

webgoto

2021/08/06 14:10

念の為。下記の形式で書いて変化があるか確認ください。 $(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 2000, fade: true, speed: 1000, cssEase: 'linear' }); });

free_teku

2021/08/06 14:16

ご丁寧にありがとうございます！結論、変わりませんでした！

webgoto

2021/08/06 14:25

すみません。そうなるとちょっとわからないですね。

free_teku

2021/08/07 13:39

かしこまりました。親身にご対応いただきありがとうございます。