div+CSS でのメモの配置 Layout_html/css_WEB-ITnose

1. 相対配置 (位置:相対)
相対配置は、ドキュメント フロー内の要素の位置に「相対」します。要素が移動されるかどうかに関係なく、要素は元の位置を占めます。したがって、要素を移動すると、他のボックスがカバーされます。
相対的に配置された要素の親要素が絶対配置され、親要素が可視:非表示に設定されている場合、親要素の位置を超えると、相対位置指定された要素は表示されません。
2. 絶対配置 (position:absolute)
絶対配置では、要素の位置がドキュメント フローから独立するため、通常のドキュメント フロー内の他の要素はスペースを占有しません。絶対的に配置された要素が存在しない場合。
親の配置要素がない場合 (親要素が相対的か絶対的かに関係なく)、キャンバスの右上隅が基準として使用されます。親要素がある場合。親要素の位置が開始位置として使用されます。親要素がvisible:hiddenに設定されている場合、絶対要素のコンテンツは親要素の位置を越えて表示されなくなります。
3. 固定配置 (position:fixed)
固定配置は相対配置のサブカテゴリであり、固定要素に含まれるブロックがビューポートであるため、常に同じ位置に表示される浮動要素を作成できます。これにより、ページがスクロールしてもウィンドウが画面上の同じ位置に保持されます。
4. Float (float:left|right)
フローティング ボックスは、その外縁が包含ボックスまたは別のフローティング ボックスの端に触れるまで左右に移動できます。フローティング ボックスに設定すると、要素は元のボックスを占有しません。位置。
含むブロックが狭すぎて水平に配置されたフローティング要素を収容できない場合、十分なスペースができるまで他のフローティング ブロックが下に移動します。フローティング要素の高さが異なる場合、移動時に他のフローティング 要素によってブロックされる可能性があります。要素が「スタック」しています
学びながら追加してください。 。これは操作が難しいです