H5 での位置決め

今回はH5での位置決めについてお届けします。H5での位置決めの注意点を実際のケースで見てみましょう。

1. ポジショニングフローの分類

1.1 相対ポジショニング
1.2絶対ポジショニング
1.3固定ポジショニング
1.4静的ポジショニング

2. 相対ポジショニングとは

標準フローにおける自分の以前の位置に対する相対ポジショニングmove
position:relative;

相対配置に関する注意事項

1. 相対配置は標準フローから離脱せず、引き続き標準フロー内のスペースを占有します
2. 相対配置では属性を同じ方向に配置します。 は 1 つだけ使用できます (つまり、左を使用する場合は右を使用しないでください。上を使用する場合は下を使用しないでください)。
3.標準フローなので、相対配置ではブロックレベル要素/インライン要素/インラインブロックレベル要素が区別されます
4. 相対配置は標準フローから逸脱するものではなく、相対的に配置された要素は標準フロー内の位置を占めるため、相対位置決め要素を設定する場合、マージン/パディングなどの属性は標準フローのレイアウトに影響します。(マージン/パディングは位置決め前にボックスの位置に追加されます)

相対位置決めアプリケーション シナリオ

1. 要素の微調整に使用します
2. 後で学習する絶対配置と組み合わせて使用​​します

絶対配置とは、ボディに対する相対的な配置を意味します

position:Absolute;

注意事項

1 絶対配置要素 標準フロー外です

2 絶対配置要素はブロックレベル要素/インライン要素/インラインブロックレベル要素を区別しません

       .box2{
            background-color: green;
            position: relative; //相对定位
            top: 20px;
            left: 20px;
            margin-top: 20px;//会加在定位之前的位置上
        }

4. 絶対配置の基準点

ルール

1. デフォルトでは、祖先要素があるかどうかに関係なく、すべての絶対的に配置された要素が参照点として使用されます

2. 絶対的に配置された要素に祖先要素があり、その祖先要素も位置決めフローの場合、絶対位置決め要素は位置決めフローの祖先要素を参照点として使用します

2.1 この絶対位置決め要素の祖先要素であればOKです

2.2 位置決めフローは絶対位置決めを参照します/相対配置/固定配置

2.3 配置フロー内の静的配置のみは機能しません

3. 配置された要素に祖先要素があり、祖先要素も配置フローであり、複数の要素がある場合配置フローの祖先要素内で、この絶対配置要素は、それに最も近い配置フローの祖先要素を参照点として使用します

5. 注意事項

1. 絶対配置要素がボディを参照として使用する場合。ポイントすると、実際には、Web ページ全体の幅と高さではなく、Web ページの最初の画面の幅と高さが基準点として使用されます。

この事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

Webページのレイアウト方法 - クリアフローティング

HTMLとCSSボックスモデル

以上がH5 での位置決めの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。