CSS3 ポジショニング | 位置 Research_html/css_WEB-ITnose

ビューポート (ビューポート)

閲覧者が Web ページドキュメントを表示するとき、通常、ユーザーエージェント (ユーザーエージェント、UA、ブラウザ) は閲覧者にビューポート (ウィンドウまたはスクリーン) 他の可視領域を提供します。ビューポートのサイズを変更すると、UA によってドキュメントのレイアウトが変更される場合があります。

ビューポートがファイルによって表示される Canvas 領域よりも小さい場合、UA はファイル全体を一目で確認できるスクロール メカニズムを提供する場合があります。理論的には、各 Canvas は最大 1 つのビューポートしか持つことができませんが、UA は複数の Canvas を生成できます (たとえば、フレーム グリッドなど、同じドキュメント上に異なる視覚領域を提供します)。

ベアリングブロック (ブロックを含む)

いくつかのボックスの位置とサイズが他の関連する「長方形ボックス」のエッジに基づいて計算される場合、そのような「長方形ボックス」をベアリングエリア包含ブロックと呼びます。簡単に言うと、いわゆるキャリー ブロックは、「要素」の位置やフローティングに関係なく、「要素」に最も近いブロック レベルの親要素を指し、その ベアリング ブロック が参照データとして使用されます。固定位置決め方式を除く）。

下はベアラーブロックの簡単な概略図です（demo-twoのベアラーブロックはdemo-oneです）。

親要素がブロック型要素の場合、そのキャリーブロックのサイズは内端までの距離となります。

親要素が単一列要素の場合、そのキャリーブロックのサイズはコンテンツの端までになります。

正常な流れの方向（通常の流れ）

正常な流れの方向とは何ですか？上から下、左から右の方向がいわゆる通常の流れです。ハイパーファイル マークアップ言語を例に挙げると、ソース コードの記述方向は上から下、左から右です。流れ。ブラウザーもこの傾向に基づいてソース コードを解釈 (文字通り翻訳) します。

別の言い方をすると、ほとんどの場合、通常のフローとは、Web ページ上で要素タグが表示される方法を指します。 さらに、ほとんどの HTML 要素タグはインライン ボックスまたはブロックボックスに属します。ブロック ボックスにはインライン ボックスを含めることができます。逆に、インライン ボックスにブロック ボックスを含めることはできません。

位置

所有設定位置 相対 | ページ 継承: なし HTML 要素によって生成されたボックスを、レンダリングしたい位置に配置するために使用されます。 ソースコードを書く時の順序に従って配置します。端的に言えば、私たちが作成した HTML 要素によって生成されるボックスを、本来の流れの方向があるべき場所に自然に配置できるようにすることを意味します。 static

デフォルト 2006 /02/15: static 適用対象: を除くすべての要素テーブル列グループとテーブル列
静的配置|静的位置の配置

この値はデフォルト値であるため、指定する必要はありません。これは、すべてのボックス要素が最初は元の位置にあることを意味します。また、bottom、left、right、top の 4 つの属性は適用されません。

相対位置|相対位置

元の位置を基準にします (他の要素の位置を基準にはしません)。元の位置を基準にして要素を配置します。要素は配置した場所に移動し、元の位置のサイズはキャリング ブロックに保存されます。

絶対位置決め|絶対位置決め

キャリングブロックに対する相対的な位置。要素は HTML のフローから削除され、ベアラー ブロックに基づいて要素に適切なスペースを与えるために再配置され、元の位置のサイズはベアラー ブロック内でクリアされます。親要素の位置決め値を

static

にすることはできません。

固定位置|固定位置位置

ブラウザ ウィンドウの ビューポート

座標を基準として、位置は固定され、スクロールの動きによって変更されなくなります。

下、左、右、上

に属する

設定値

下のボックスの設定 下の間隔 左の設定 ボックス 左の間隔 右の設定 ボックス 上のボックス 上部の間隔 auto | 配置されたターゲット要素とキャリーブロックの間の境界距離を設定します。これら 4 つの値はすべて負の数に設定できることに注意してください。負の場合、要素の位置は保持ブロックの境界の外側になります。 軸位置の z-index 適用対象:配置要素 継承: なし

z-index 値
デフォルト値: au to

要素を重ねて互いに覆うために使用されます。値が大きいほどレベルが高くなります（マイナスの値も使用可能）。

クリップ

所有	設定値
クリップ 表示範囲をトリミング	Car |
デフォルト値: auto 適用対象: 絶対配置要素 継承: なし

可視光範囲内のボリューム内でクリップします。

RECT RECT (上、右、下、左) は要素の左上隅から切り出されます。

イラスト イラスト(上、右、下、左)は長方形法と似ていますが、要素境界から内側に切り取られています。