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

Question

前提・実現したいこと

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

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

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

該当のソースコード

    <header class="header">
        <div class="header-inner header-fixed">
                    <h1 id="logo">Cresta Design</h1>
                   
                    <nav class="header-nav">
                            <ul class="header-list">
                                <li class="list-item"><a href="#">Concept</a></li>
                                <li class="list-item"><a href="#">Service</a></li>
                                <li class="list-item"><a href="#"> Works</a></li>
                                <li class="list-item"><a href="./Contact.html">Contact</a></li>
                            </ul>
                    </nav>
                    <button class="burger-btn">
                        <span class="bar-bar_top"></span>
                        <span class="bar-bar_mid"></span>
                        <span class="bar-bar_bottom"></span>
                    </button>
        </div>
            
           
           
            <div class="image-inner">
                <div class="fv">
                       <ul class="slider">
                           <li><img src="./image/[e-mail]" alt="1枚目"></li>
                           <li><img src="./image/[e-mail]" alt="2枚目"></li>
                           <li><img src="./image/[e-mail]" alt="3枚目"></li>
                       </ul>
                </div>
                <div class="image-message">
                        <p>Design for Smile. <br class="sp-br">快適なオフィスを  デザインする</p>
                </div>
            </div>
        </div>
        
    </header>

.header{
    padding: 19px 30px;
    box-sizing: border-box;
    width: 1440px;
    height: 752px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /*ヘッダーfixed対応*/
    transition: .3s;
    .header.fixed{
        position: fixed;
        background: #282f35;
        padding: 30px;
        width: 100%;
        transition: .3s;
        
    }


    @include overTab{
        .header{
            padding: 30px 4vw;
        }
    }
    
.header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    

    #logo{
        padding-left: 120px;
        margin-top: 19px;
        font-family: 'Noto Serif';
        font-size: 2.6rem;
        color: #fff;
        }
    
    }

    .header-nav{
       
        @include overTab{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #282f35; 
         }
    

        .header-list{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 10px;

            .list-item{
                display: flex;
                justify-content: space-between;
                align-items: center;
                >a {
                    text-transform:inherit;
                    font-size: 16px;
                    color: #fff;
                    transition: .3s;
                    font-weight: bold;
                    font-style: italic;
                }
                + .list-item{
                    padding-left: 30px;

                    }
                }

            }
        }
    }

/*ボタン*/
.burger-btn{
    display: flex;
}

.image-inner{
    .fv{
        height: 100vh;
        min-height: 550px;
        position: relative;
        background-image: url(../../image/[e-mail]);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        .img{
            height: 100vh;
            object-fit: cover;
        }
        @include overTab{
            width: 100%;
        }

    }
    

.image-message{
    position: absolute;
    top: 400px;
    left: 177px;
    padding-bottom: 170px;

        > p {
            font-size: 5rem;
            line-height: 1.4;
            color: #fff;

        }

            .sp-br{
                display: block;
                
                @include overTab{
                    .sp-br{
                        display: none;
                        
                    }
                }

            }
        }
}

//スッティキーヘッダー
$(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/ツールのバージョンなど）

Answer 1

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

    .header.fixed{
         ↓
    .header-fixed{
        position: fixed;
        background: #282f35;
        padding: 30px;
        width: 100%;
        transition: .3s;
        z-index: 99; /*追加*/
    }

Comments

[free_teku]

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

[free_teku]

因みに、slickについてもお伺いしたいのですが、可能でしょうか？

今、fvの画像が3枚あり、それらがslickとfadeで徐々に変わり続けるようにしたいです。

可能でしょうか？

[webgoto]

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

[free_teku]

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

[webgoto]

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

[free_teku]

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

[webgoto]

私のローカルでコードを動作させました。

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]

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

[webgoto]

念の為。下記の形式で書いて変化があるか確認ください。

$(function(){
$('.slider').slick({
autoplay: true,
autoplaySpeed: 2000,
fade: true,
speed: 1000,
cssEase: 'linear'
});
});

[free_teku]

ご丁寧にありがとうございます！

結論、変わりませんでした！

[webgoto]

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

[free_teku]

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