[ 解決済 ] safariでフローティングバナーが表示されない問題について

[憲兒岩室]

■ WordPress のバージョン
6.6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Katawara

■ テーマのバージョン
1.26.6

■ 期待する動作
Katawaraで制作したサイトの右上にフローティングバナーを設置したい。

■ 自分で試した事
z-indexを99999など。下記実際のバナーまわりのcss記述です。

.fixed_banner {
position: fixed; /* 追従させる為にfixedの値を記述 */
z-index: 99999; transform: translateZ(1px); /* 他の要素の下に隠れないように前面配置 */
top: 100px; /* 上から100pxのところにバナーを配置 */
right: 0px; /* 右から0pxのところにバナーを配置 */
background-color:transparent;
border-color:transparent;
}

.fixed_banner_pc {
border-radius: 10px 0px 0px 10px;
transition : 0.5s;
}

.fixed_banner_pc:hover {
opacity: 0.6;
}

■ 症状が発生するブラウザ
Safari

■ 実際の症状
連続の質問で失礼します。

Katawaraで制作したサイトの右上あたりにフローティングバナーを設置したのですが、Safariで閲覧すると表示されなくなってしまいます。Chrome、Microsoft Edge、Firefoxでは正常に表示されています。

サイドメニューがある左上にバナーを持ってくると、Safariでも表示されています。スクロースする右側のメインカラムではz-indexを99999などにしても、どうしても下になってしまうようです。
どうぞご教示ください。
よろしくお願いいたします。

[憲兒岩室]

追記です。

z-index: 99999;
のうしろにある
transform: translateZ(1px);
は消している状態です。

よろしくお願いいたします。

[うなこ]

お世話になっております。

フローティングバナーの提案になります。
VK Blocks Pro に「固定表示ブロック」がありますので、そちらを設置して、中にはお好みのブロックを入れて追従バナーを設置するのはいかがでしょうか。

こちらですとブロックで設置できますので、cssを書くよりも簡単に設置できるのではないかと思いまして、提案させていただきました。

[憲兒岩室]

「固定表示ブロック」で解決できました！！
確かにcss書くより簡単でした。。
大変助かりました！！
ありがとうございましたm(_ _)m

[投稿者]

投稿