CSS の相対位置と絶対位置の関係の分析

この記事では、css に関する関連知識を提供します。主に CSS の絶対配置と相対配置に関連する問題を紹介します。相対配置とは、要素が移動することです。元の位置を基準にして、絶対配置とは、次のことを意味します。要素が移動すると、その要素はその祖先要素に相対的に移動します。一緒に見てみましょう。皆さんのお役に立てれば幸いです。

# (学習ビデオ共有:

css ビデオ チュートリアル、html ビデオ チュートリアル)

position:relative 相対配置の詳細説明

相対配置とは、要素が移動するとき、元の位置を基準にして移動することを意味します。

相対位置決めの特徴:

• 元の位置に対して相対的に移動します(位置を移動する場合、基準点は元の位置になります)

• 標準ストリーム内の元の位置は引き続き占有され、後続のボックスは引き続きそれを標準ストリームとして扱います (標準から外れることなく、元の位置を保持し続けます)。したがって、相対位置決めは規格外ではなく、最も一般的な用途は絶対位置決めです。

#position:absolute 絶対配置の詳細説明絶対配置とは、要素が移動するときに相対的に配置されることを意味します。それには祖先要素（父親タイプ）の観点から。

絶対配置の特徴:

祖先要素が存在しないか、祖先要素が配置されていない場合、ブラウザが優先して配置されます (ドキュメント ドキュメント)
先祖要素に位置決め(相対、絶対、固定位置)がある場合、最も近い位置にある先祖要素を基準点として位置を移動します。
絶対位置決めは、元の位置 (ラベル外) を占めなくなりました。
以下では、息子の父親フェーズの起源と具体的な使用法について説明します。

息子の父親フェーズとは、子が絶対位置にある場合、親は相対位置を使用する必要があることを意味します。ポジショニング。

子は絶対に配置され、位置を占有しません。他の兄弟ボックスに影響を与えることなく、親ボックス内のどこにでも配置できます。
親ボックスは、子ボックスが親ボックス内に表示されないように配置する必要があります。
親ボックスをレイアウトするときは、親ボックスが位置を占める必要があるため、親は相対的に配置することしかできません。
要約: 親ボックスは位置を占有する必要があるため、相対配置であり、子ボックスは位置を占有する必要がないため、絶対配置です。

例は次のとおりです。 CSS タグの相対位置と絶対位置は、position 属性、および相対位置と絶対的な位置は変更されず、要素のサイズと形状のみが要素の位置を変更します。

1.position 属性の値は次のとおりです:

static: デフォルト値、位置決めなし、要素は次のように表示されます。通常の流れ。
absolute: 静的配置以外に、最も近い祖先要素を基準にして配置するには、絶対配置を使用します。要素の位置は、left、top、right、bottom 属性によって指定されます。
relative: 要素を通常の位置に対して相対的に配置します。
修正: 要素をブラウザ ウィンドウに対して絶対的かつ相対的に配置します。要素の位置は、left、top、right、bottom 属性によって指定されます。
inherit:position 属性の値を親要素から継承することを指定します。
#位置決めなしの例:

#結果は次のように表示されます:

2. 相対配置

相対配置の基準点は、親ノード、兄弟ノード、ブラウザを基準としたものではなく、ラベル配置前の位置です。

   相对定位的元素，通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离，right 表示相对于原本位置的右外边界左移的距离，top 表示相对于原本位置的上外边界下移的距离，bottom 表示相对于原本位置的下外边界上移的距离。并且，偏移量可以是正值，也可以是负值，负值表示向相反的方向移动。

   left、right、top、bottom 这 4 个属性的值，可以是长度值（可以是绝对单位或相对单位），也可以是百分比。使用百分比时，水平偏移量根据其父元素 width 属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是，在设置偏移时，如果父元素没有显式定义 height 属性，就等同于 height 属性的值为 0。

上記の例を変更し、div2 に相対位置を使用します。

結果は次のようになります。

##3. 絶対配置:

#絶対配置は、最も近い位置にある祖先要素を基準にして配置されます。祖先要素がない場合は、ドキュメント本文 (body) が使用されます。 )、これはブラウザです。ページのスクロールとともに移動します。親が配置されている場合は親を参照します。親が配置されていない場合は、親を参照し続けます。

絶対に配置された要素はドキュメント フローから分離されます。つまり、標準フロー内で直接削除されるため、要素の元の位置が占有されます。
上記の例を変更します (親ノードなし):

効果は次のとおりです:

別の例 (親ノードに位置決めがあります):

絶対位置決めが指定されている場合使用されません:

効果は次のとおりです:

絶対位置を使用します:

効果は次のとおりです:

(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)

以上がCSS の相対位置と絶対位置の関係の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。