1

「ドッキング」ヘッダーを持つ Web サイトのベータ版に取り組んでいます。訪問者がページを下にスクロールすると、ヘッダーが固定され、ページのコンテンツがヘッダーの下にスライドします。

これは、次のようなコンテンツ ページでうまく機能します: http://www.aride.org.nz/longest-day/how-to-do-the-longest-day-ride/

ただし、次のような Google マップがあるページでは機能しません: http://www.aride.org.nz/longest-day/2013/

ページを十分に下にスクロールできるように、ビューポートのサイズを小さくする必要がある場合があります。

これは Chrome でのみ発生するようです。Safari 5、Firefox 23、Opera 15、さらには (うーん) Internet Explorer 9 でも期待どおりに動作します。

Web Developer を使用して Chrome でページを見ると、ヘッダーとナビゲーションの 99/999/9999 と比較して、メイン コンテンツの z-index が 1 に設定された正しいスタック レベルがすべて表示されます。

どんなアイデアでも大歓迎です-私は最後に壁にぶつかりました。

4

1 に答える 1

1

解決：

子要素自体で#header-containerはなく、要素を修正したままにしておくと、問題が解決すると思います。コンテキストのスタックheaderに関係するものですが、完全に理解しているふりはしません。

説明：

Google がマップで 3D 変換を使用しているため、レイアウトが壊れています。ここに関連する質問があります。

tl;dr:

3D 変換は、影響を受ける要素のスタック順序を決定するブラウザの機能を台無しにします。

于 2013-11-08T06:18:48.353 に答える