iphoneなどのスマホでposition fixedにした時にスクロール中にfixedしてくれないからtransform: translate3dで対応してみたらz-indexではまった


タイトルで全てを終わらせている感じ。

ちょっと複雑な重なりあいをテストしていてタイトルの現象にハマった。

<div class="block-1st">
 <div class="saizenmen">最前面に来てほしい</div>
</div>
<div class="block-2nd">
block-1stに少し喰い込む形にする(margin-top:-50px; etc)けど、その内部の.saizenmenよりかは裏に回りたい
</div>

こんなとき。

.box-1stには背景だけ入れてみる。

.saizenmenに
position relative
z-index 1000
transform: translate3d(0, 0,0) //iphoneなどでスクロール中にfixedしてほしいから追加

としてみて、
.block-2ndに
position:relative;

としてみると

優先順位としては
.saizenmen > .block-2nd > .block-1st
になってほしいのにならない。

その理由としてはtranslate3dのz軸の指定が悪さをしていた。
z-indexよりもそのz軸の指示を優先するらしく。

なので
transform: translate3d(0, 0, -1);
とすると当初の想定通りの重なりあいになりました。

文字だけだとわかりづらい。

, , ,

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です