デモサイト作成中です。

ヘッダは固定でスクロールすると背景がぼやけるようにしたいです。

しかし、スクロールしてフルワイドに差し掛かるとヘッダがフルワイドの下に隠れてしまいます。

 

そこで、z-index:10000;

こちらを追加しましたが、更新すると、「うまくいかなかったようです」と何度も出てしまいます。

どうすれば良いのかわからないため、教えていただければ嬉しいです。よろしくお願いします。

 

ちなみに、現状は追加CSSで以下を入れています。

.loop-slider .swell-block-column figure {
width: 200px; /* 画像の横幅を指定（パソコン） */
position: relative;
}

.loop-slider .swell-block-column figure::before {
padding-top: 65%; /* 画像の縦横比を指定 */
display: block;
content: "";
}

.loop-slider .swell-block-column figure img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
}

@media screen and (max-width: 959px) {
.loop-slider .swell-block-column figure {
width: 200px; /* 画像の横幅を指定（スマホ） */
}
}

@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}

to {
transform: translateX(-100%);
}
}

/* パンくずリストの固定 */
#breadcrumb {
position: -webkit-sticky;
position: sticky;
top: calc(var(--swl-headerH, 0px) + var(--swl-adminbarH, 0px));
z-index: 2;
}
/* ヘッダーの背景を透明にした場合の固定 */
#header.-transparent {
position: fixed !important;
}