モバイルページの先頭の固定位置の絶対位置実装（コード例）-H5 チュートリアル-php.cn

モバイルページの先頭の固定位置の絶対位置実装（コード例）

不言

リリース： 2019-01-16 10:36:15

転載

6859 人が閲覧しました

この記事の内容は、モバイルページの先頭の絶対配置の実装についてです。必要な方は参考にしていただければ幸いです。あなたへ。

モバイル側で開発する場合、通常、ページ全体のヘッダーには、下の図のタオバオのヘッダーのように、固定領域が存在します。この領域は、画面をどのようにスワイプしても表示されます。 PC 側では、position:fixed を使用してこれを実現できます。ただし、position:fixed には特定の互換性の問題があり、モバイル端末には多数のビューポートがあるため、この固定がどのビューポートに関連しているかについて間違いを犯しやすくなります。したがって、通常は固定位置決めの代わりに絶対位置決めが使用されます。以下の具体的なコード例:

モバイルページの先頭の固定位置の絶対位置実装（コード例）

HTML コードは次のとおりです:

        <header>
            <div>
                
            </div>
            <div>
                
            </div>
        </header>

ログイン後にコピー

CSS コードは次のとおりです:

            .header-box{
                /*position:fixed;*/
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:179px;
                background:#ef3229;
            }
            
        
            ul>li{
                height:350px;
                border-bottom: 1px solid black;
            }

ログイン後にコピー

上記の HTML は、上部の固定領域と下部のコンテンツ領域を定義します。上部は、position を使用して絶対的に配置され、left を 0、top を 0 に設定します。コンテンツ領域の高さが表示領域を超えています。

最終的な効果は次のようになります。

モバイルページの先頭の固定位置の絶対位置実装（コード例）

この時点で、スクロールが発生していることがわかります。滑った後、上部に固定されていたはずの領域が再び失われます。言い換えれば、固定測位ではなく絶対測位を使用しても、望んでいたものは達成できませんでした。どうしてこれなの？

ここで、2 つの重要な知識ポイントを理解する必要があります:

ここでの絶対的な位置は誰に対するものですか?
#ここのスクロールバーは誰に追加されたものですか?

最初に最初の質問を分析します。

position:absolute は、位置値が静的ではない最も近い位置にある祖先要素を基準にして配置されていることがわかります。祖先要素が配置されていない場合は、ルートノードドキュメントを基準にして配置されます。ヘッダー要素の祖先要素は、body、html、および document です。このうち、bodyとhtmlのデフォルトの配置はstaticです。言い換えれば、これは最終的にドキュメントに対して相対的に配置されます。

2 番目の質問を分析してみましょう。コンテンツがブラウザの高さを超える場合、スクロールバーは誰に追加されますか?実際には、これを html 要素に追加する必要があります。

上記 2 つの知識ポイントを理解した後、それを分析できます。ドキュメントがブラウザウィンドウを超えるのは、まさに HTML 要素のスクロールバーのせいであることがわかっています。したがって、最初に行う必要があるのは、HTML のスクロールバーを無効にすることです。

html{
  overflow:hidden;
}

ログイン後にコピー

HTML のスクロールバーを無効にすると、固定位置ではなく絶対位置を使用する問題は解決しますが、新たな問題が生じます。つまり、ページ全体にスクロールバーがなくなりました。しかし、実際にはスクロールバーが必要なので、本文にスクロールバーを追加できます。

html{
    height:100%;
}
body{
    height:100%;
    overflow:auto;
}

ログイン後にコピー

bodyの高さをブラウザの高さに設定する必要があり、htmlの高さはブラウザの高さに依存するため、最初にhtmlの高さをブラウザの高さに設定し、そして本文は html から継承できます。

最終的なコード形式は次のとおりです:

            html{
                height:100%;
                overflow:hidden;  //禁用滚动条，实现相对于document的绝对定位代替固定定位。
            }
            body{
                
                height:100%;
                overflow:auto;   //添加滚动条
            }
            ul{
                margin-top:179px;
                list-style: none;
            }
            .header-box{
                /*position:fixed;*/
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:179px;
                background:#ef3229;
            }
            
        
            ul>li{
                height:350px;
                border-bottom: 1px solid black;
            }

ログイン後にコピー

要約: 使用した関連知識:

HTML 要素と body 要素の絶対位置指定デフォルト値すべて静的です。したがって、要素が非静的祖先要素を見つけられない場合、その要素はドキュメントを基準にして配置されます。
html 要素と body 要素は両方ともブロックレベルの要素です。デフォルトでは、この行は 1 行を占め、その幅はブラウザの幅と同じです。高さ:100% が高さに設定されている場合、高さはコンテンツ領域の高さと同じになります。その高さはブラウザの高さになります。
html 要素には、デフォルトで overflow:auto が設定されています。コンテンツがブラウザの高さを超えると、スクロールバーが表示されます。

以上がモバイルページの先頭の固定位置の絶対位置実装（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。