div cssの配置と配置応用を詳しく解説

詳細な読み方
* 絶対と相対の解釈
* 位置: 突破できない相対/絶対レベル * 記事「Unbreakable Levels」の補足

WEB標準の適用において常に難しいのがポジショニングであり、そのポジショニングが明確でないと本来得られる効果が得られなかったり、得られた効果が歪められたりする可能性があります。ポジショニングの原理が明確になれば、ポジショニングによってWebページの完成度が高まります。

配置の定義:

CSS での配置に関する内容は次のとおりです。位置:相対 | 絶対 | 静的 | 固定

静的 特別な設定はありませんが、基本的な位置決め規則に従い、z-index を介して階層化することはできません。
relative はドキュメント フローから切り離されず、上下左右の位置決めを通じて独自の静的位置を参照し、z インデックスを通じて階層化できます。
Absolute はドキュメント フローから分離され、上下左右に配置されます。最も近い親の位置決め要素を選択します。親の位置が静的である場合、絶対要素はボディ座標の原点に配置され、z インデックスによって階層的に等級付けできます。
固定の固定位置。ここでの固定オブジェクトは、本体や親要素ではなく、ビジュアル ウィンドウです。階層分類は、z-index を通じて実行できます。

CSS での位置決めのカスケード グレーディング: z-index: auto | namber;

auto は親オブジェクトの位置に従います
namber 単位のない整数値。負の値も可能です。

配置の原則:

移動できる要素 (相対位置)

テキスト フローでは、どの要素もテキスト フローによって独自の位置が制限されますが、それでも CSS を通じてこれらの要素を作成します。 float を使用して要素を浮動させることができ、また margin を使用して要素の位置を移動することもできます。しかし実際には、これはマージン値を増やすことによって得られる欺瞞にすぎないため、実際の変位ではありません。本当の意味での変位は、相対的に位置する要素に対して上、右、下、左（以下、ＴＲＢＬと呼ぶ。ＴＲＢＬは２つに分けることができる）によって発生する。

また、配置された要素の座標点がマージン値の左上端の点、図の点 B にあることに注意してください。その後、すべての変位計算はこの点に基づいて要素を押し込みます。 TRBL が正の場合、変位の方向は一貫しています。 TRBL が負の場合、変位の方向は外側であると推測できます。図では、マークを指す変位矢印があり、プラス記号は正の変位方向、マイナス記号は負の変位方向を示します。変位の方向については、Yi Fei の「単純なものから深いものまでマージン属性について語る (1)」を参照してください。

任意の要素に含めることができます。位置 (絶対位置)

上で述べたように: 相対位置指定では、テキスト フロー内で位置を上下左右に移動することしかできません。また、特定の制限もあります。その表示領域はテキスト フローから分離されていますが、依然としてテキスト フロー内に保持されます。 text flow. 場所とは、出稼ぎ労働者が別の場所に行っても、故郷に自分専用の場所があり、その場所は彼の移動によって変化しないようなものです。ただし、これでは明らかに空白が残るので、テキスト フローでこの部分を放棄したい場合は、絶対配置を使用する必要があります。絶対配置は、テキスト フローから切り離されるだけでなく、テキスト フロー内にこの絶対配置要素のための排他的なスペースを残しません。これは工場におけるポジションのようなもので、従業員が一人辞めても、自然と他の従業員がそのポジションを補充します。自然に外に出た部分はフリーボディになります。絶対配置では、TRBL を通じて要素を任意の位置に設定します。親レイヤーのpositionプロパティがデフォルト値の場合、TRBLの座標原点はボディの座標原点から始まります。

関連する絶対位置

上記は単一の絶対位置ですが、実際のアプリケーションでは、特殊な形式が使用されることがよくあります。必須。つまり、位置決め要素に絶対位置決め特性を持たせたいと考えていますが、絶対位置決めの座標原点を Web ページ内の特定の点に固定できることも望みます。この点を移動すると、絶対位置決め要素は確実に位置決めできます。元の座標を基準とした相対位置。つまり、この絶対位置は Web ページとともに移動し、Web ページ上の固定位置に固定される必要があります。通常、この効果は、Web ページが中央に配置されている場合に特に重要です。この効果を実現する基本的な方法は、絶対配置された親を相対配置または絶対配置に設定することです。この場合、絶対配置の座標は親を座標の始点とします。

とはいえ、座標原点が親座標原点ではないという、非常に不思議な座標位置です。

常に視界に入る要素 (固定位置)

広告の悪用により、一部のブラウザ ソフトウェアが使用を開始しました。広告コンテンツのブロックでは、一部の優れたエフェクトが推奨されなくなりました。たとえば、Web ページがスクロールするにつれて、要素の位置が継続的に変更される場合があります。 CSS の位​​置属性を使用してこのような効果を実現できるようになりました。この要素属性はposition:fixed ですが、これは以前はサポートされていませんでした。その意味は「固定位置」です。この固定は絶対配置とよく似ていますが、唯一の違いは、絶対配置が Web ページ内の特定の位置に固定されるのに対し、固定配置はブラウザのビュー フレームの位置に固定されることです。

元のブラウザはこの属性をサポートしていませんでしたが、ブラウザの発展により、今日の高度なブラウザはこの CSS 属性を正しく解析できるようになりました。そして、CSS HACK を通じて、IE6 はこの効果を実現できます (現在、IE5.x はこの効果を実現できません)。記事が長くならないように、この例だけを紹介してこの記事を終わります。この例に関するいくつかの問題を自分で分析できます。何か分からないことがあれば、メッセージを残してください！