フローティングとポジショニングを理解する_html/css_WEB-ITnose

まえがき

floatとpositionをよりよく理解するには、私が書いた「HTMLドキュメントフローとドキュメントオブジェクトモデルDOMの理解」という記事を読むことをお勧めします

Text

1. Float

CSSデザインのfloat属性主な目的は、画像をテキストで囲む効果を実現することです。ただし、このプロパティは複数列レイアウトを作成する最も簡単な方法であることがわかります。

要素を浮動させるにはどうすればよいですか？まず幅 width を設定し、次にスタイル ルール float:left/right を追加します。

//注: このフローティング要素は通常のドキュメント フローから削除されました。フローティング要素はブロック レベルの要素によって無視される要素ですが、インライン要素はその位置を認識しており、インライン要素はフローティング要素の境界に注意を払い、ブロック要素は通常どおりページに流れます。

フローティングといえばフロートのクリアリングです。以下に示すように:

ブロックレベル要素は左側のフローティング要素の存在を知らない(フローティング要素はドキュメントフローにない)ため、ブロックレベル要素は領域全体をカバーします。要素の CSS クリア プロパティを使用してリクエストを行うことができます。要素がページに流入するとき、要素の左側、右側、または両側にフローティング コンテンツを配置することはできません。

スタイルclear:left;を追加すると、ブロックレベルの要素がフローティング要素の下に配置されます。

フローティングの詳細については、例を参照してください。 「浮動要素を囲む 3 つの方法」

2. Position

position 属性には、静的、相対、絶対、固定の 4 つの値があります。

(1) static

HTML要素のデフォルト値、つまり配置はなく、要素は通常のフローで表示されます。静的に配置された要素は、上下左右の影響を受けません。

（2）relative

relativeは、ドキュメントフロー内の要素の元の位置（またはデフォルトの位置）です。相対配置により、要素は通常どおりページに流入しますが、ページに表示される前にオフセットする必要があります。

//注: この要素が元々占めていたスペースは保持され、他の要素の位置は変更されていません。相対的に配置された要素は、絶対的に配置された要素のコンテナ ブロックとしてよく使用されます。

(3) 絶対

絶対配置では、ブロック要素もインライン要素もその存在を知りません。そのデフォルトの位置はコンテキストです。

要素。

//絶対配置要素の任意の祖先要素は、対応する祖先要素の位置が相対/固定に設定されている限り、その配置コンテキストになることができます。

(4) 固定

固定配置では、ブロック要素もインライン要素もその存在をビュー ウィンドウに認識しません。

追記：相対、絶対、固定にはz-index属性があります。