position: fixed; ヘッダーがスマホ実機で見えない

Question

yahooショッピングのカスタマイズをしており、スマホの商品ページ・カテゴリーページにヘッダーを独自で作成し、画面上に固定できないかどうかを検証しています。

それぞれスマートフォン情報→フリースペースに下記タグを入れて、PC上で見るとヘッダーが画面上部に固定されてうまく表示されているのですが、
スマホ実機で確認すると、どうやらフリースペースの親要素のdivタグ内のみでしかヘッダーが表示されません。
（要素自体は一番上にあるようなのですが、透明になっています）
position: fixed;でz-indexを指定しているのでスマホでも見えると思っていたのですが、PCとスマホで挙動が違うのはどうしてなのでしょうか？

フリースペースの親要素のdivタグは２つあり、下記スタイルが適用されています。

.mdFreeSpace {
    border-top: 1px solid #808080;
    overflow: hidden;
}

.mdFreeSpace .elScroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
}

下記はヘッダーのソースです。
cssとJSがyahooの仕様上使えないようでしたので、スタイルを直書きしています。

<div style="position: fixed; top: 0; left:0; width:100%; height: 64px; background: #fff; z-index: 999999999999999999 !important; visibility:visible !important; display:block !important; transform: translate3d(0, 0, 0) !important; opacity: 1 !important;">
  
～ヘッダーの中身～

</div>

Comments

[yoshinavi]

fixedにする前は「ヘッダー」はキチンと表示されているのでしょうか？

Answer 1

Google先生に「z-index 最大値」で聞いてみたら、

z-indexプロパティの最大値は、2147483647となっています。 これは 2147483647 = 2^31 – 1 = 0×7FFFFFFF で符号付き32bit整数の最大値です。 過去には、2147483647以下であるブラウザもありましたが、モダンブラウザでは2147483647が最大値となっています。

って言われましたよ。