MacSafariに限って、z-indexを無視します。
html
1<main> 2<section id="leftBox"></section> 3<div id="rightBox"> 4<section>****</section> 5<section>****</section> 6<section>****</section> 7<section>****</section> 8<section>****</section> 9<section>****</section> 10</div> 11<section id="bottomBox">****</section> 12<section id="bottomBox2">****</section> 13</main>
css
1*{display:block;} 2#leftBox{ 3position:sticky; 4top:200px; 5left:200px; 6width:200px; 7height:200px; 8z-index:1; 9} 10#rightBox{ 11padding-left:200px; 12margin-top:-200px; 13width:calc(100% - 200px); 14} 15#bottomBox,#bottomBox2{ 16position:relative; 17width:100%; 18z-index: 1000; 19background-color:#fff; 20}
スクロールしていくとbottomBoxはleftBoxとrightBoxの上になって隠れるのですが、safariに限ってleftBoxの中身を表示することがあります。(常ではなくスクロール到達直後など。画面クリックなどすると消えます)
これに該当する症状資料等が検索等できなかったため、アドバイスを頂きたいです。
レスポンシブにしている構造上スマホではこの件は無視しているのでとりあえずMacで解決すれば大丈夫です。
あなたの回答
tips
プレビュー