Owlカルーセルの下にヘッダーが隠れてしまう

Question

前提・実現したいこと

ヘッダーを固定し、owlカルーセルに隠れないようにしたい

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

ヘッダーを固定するとカルーセルの下に隠れてしまう

緑色の部分がヘッダーです。

position: fixed;を消すと普通に表示されます。

該当のソースコード

header{
background: $base_color;
position: fixed;
width: 100%;
.header-container{
display: flex;
justify-content: space-between;
.logo{
margin-top: 18px;
margin-bottom: 34px;
width: 20%;
}
.navi{
padding-top: 45px;
ul{
display: flex;
li{
a{
text-decoration: none;
font-size: 1.8rem;
font-weight: bold;
color: #ffffff;
padding-bottom: 10px;
margin-left: 40px;
&:hover, &:active {
color: $key_color;
border-bottom: 2px solid;
}
}
}
}
}
}
}

試したこと

Z-indexを加えて重ね順を変えた（）

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

vs-code、chromeで開きました。
owlcarousel 2を使用しています。

Comments

[Rn-sk]

お答えいただき、ありがとうございました。
試してみたところ、ヘッダーをちゃんと固定することができました。

Answer 1

こんにちは。

owlスライダーに position: relativeとz-index: 1がついていて、スタッキングコンテキストを持っているのが原因ではないかと思います。
z-index で重ね合わせ順序をコントロールしてみてはいかがですか？

header{
    z-index: 2; // owlスライダーより大きい数
}

より大きな z-index を持つ要素はより小さな要素の上に重なります。

z-index - CSS: カスケーディングスタイルシート | MDN