CSSの絶対位置を徹底分析して徹底理解！-CSSチュートリアル-php.cn

CSSの絶対位置を徹底分析して徹底理解！

青灯夜游

リリース： 2021-09-27 10:20:18

転載

2706 人が閲覧しました

この記事では、CSS における絶対配置を分析し、徹底的に理解していきます。

CSSの絶対位置を徹底分析して徹底理解！

要素の位置決めは、要素自体の位置を特定することではなく、要素のコンテナーの位置を特定することです。自分自身を配置できるようにするには、どの親 div に対して相対的に配置されるかを知る必要があります。 [関連する推奨事項: 「css ビデオチュートリアル」]

次のコードは、.box-1 から .box -3## までの 4 つのネストされた div を示しています。 # センタリングを実現するには、display: flex と margin: auto のみを使用してください。 .box-4 margin は設定されておらず、ドキュメントフロー内のデフォルトの位置にあります。

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4"></div>
      </div>
    </div>
  </div>
</body>

ログイン後にコピー

position 属性がすべての要素に設定されていません

body {
  display: flex;
}
.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

ログイン後にコピー

CSSの絶対位置を徹底分析して徹底理解！

##.box-4
デフォルトの位置
自分自身を配置するには、要素は 2 つのことを知っている必要があります:

、right、bottom, left .box-4 # を与えたとき、どの親要素を配置するかを基準にして値
##position:Absolute

.box-4

絶対位置決め時の位置オフセットはありません

CSSの絶対位置を徹底分析して徹底理解！

top を追加することで: 0
および left: 0 の場合、要素は、どの要素が配置の参照コンテナーとして機能するかを認識している必要があります。ここの要素は画面の左上隅に配置されていることがわかります。
.box-4

は、最初にその親コンテナに

position 属性セットがあるかどうかを確認します。最初に、.box-3 に位置決め属性セットがないことがわかり、その後、次のレベルの .box-2 および .box-1 に続きました。 、使用可能な position 属性を設定しているものがないことが判明しました。 結局、.box-4 は、位置決めの参照に使用できる親要素を見つけることができず、最終的には body しか使用できませんでした。位置決めの参考に。要素は最終的に画面の左上隅に配置されます:

.box-4

絶対配置。すべての親要素はそうではありません。 set

position CSSの絶対位置を徹底分析して徹底理解！プロパティ

position:相対を .box-1、
.box-4# に設定すると、 ## 利用可能な位置決め参照が見つかりました。そして最終的に

.box-1

を基準とした相対的な位置決めを達成しました: .box-4 絶対的な位置決め、

.box-1

相対位置、 CSSの絶対位置を徹底分析して徹底理解！ .box-2

および

.box-3
は変更されません。 絶対位置の要素は相対位置になります。自分自身を最も近い祖先要素に合わせて配置します。 利用可能な祖先要素が見つかると、他の要素はその要素に関連付けられなくなります (box2 や box3 など)。以下の図は、position:relative を .box-2
と

.box-3