HTMLでpositionとfloatを使用するにはどうすればよいですか?

構文:

position: static | 固定配置 | 相対配置 ルール (HTML のデフォルト状態)

absolute: 絶対配置、オブジェクトは left、top を使用して正確に配置される必要があります、右、下、その他の属性。カスケードには z-index 属性を使用できます。 (絶対配置を使用する場合、要素が浮いて指定した位置にない場合は、要素の親要素で相対配置を使用できます。「個人的な提案」)

relative: 相対配置、オブジェクトは切り離されません。ドキュメント フローから移動するため、Absolute を同じ方法でスタックすることはできませんが、通常のドキュメント フロー内の元のオブジェクトの位置を基準にして移動するには、左、上、右、下などの属性を使用する必要があります。他の要素によって占められます。

固定: ドキュメント フローから切り離された固定配置により、要素を画面上の固定位置に保つことができ、スクロール バーを引き下げても要素の位置は変わりません。

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

p111111 は下に 150 ピクセル、右に 200 ピクセル移動します

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

p222222 は下から 150 ピクセル、右の境界線から 100 ピクセル移動します

常に右下隅に表示されるモジュールを作成したい場合は、position を使用します。ページ: 固定; 下: 50 ピクセル; 右: 50 ピクセル; ページがどのように変化しても、p は常に同じ位置に表示されます

。 z-index : 100px; 続くピクセルが大きいほど、p のレベルが高くなります

構文:

float: left、left、または未使用 (デフォルト)

float: ドキュメント外flow、float は Floating

<p  id="p1">
　　<p  id="p2"></p>
</p>

の親要素に対する相対的な関係は上記の通りです: p1 は p2 の親要素 p2 であり、p2 は p1 内でのみフローティングできます

フローティングでよく使用される状況は、水平ナビゲーション バーの使用です。水平ナビゲーション バーを実装するには 2 つの方法があります。li タグの表示属性を inline スタイルに変更するだけで、リストを並べて表示できます。これは、ボックス モデルを理解した後でわかります。インラインタグのマージンとパディングが逆であることを示します。ここでは、リストオプションの左側と右側のみを拡張できます。上下方向のみは制御されません。ブロックレベルのラベルの方向が制御されます。

float は、画像とテキストを同じ p に配置し、画像と p に float を与える簡単なアプリケーションです。

以上がHTMLでpositionとfloatを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。