ホームページ  >  記事  >  ウェブフロントエンド  >  CSSの絶対位置を徹底分析して徹底理解!

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

青灯夜游
青灯夜游転載
2021-09-17 11:21:332682ブラウズ

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

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

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

次のコードは、.box-1 から .box -3## までの 4 つのネストされた div を示しています。 # センタリングを実現するには、display: flexmargin: 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 つのことを知っている必要があります:

by
    top
  • rightbottom, left .box-4 # を与えたとき、どの親要素を配置するかを基準にして値
  • を設定します。
  • ##position:Absolute
  • 属性を追加した後、それが通常のドキュメント フローから分離されていることがわかりました。 Position プロパティを設定しないと、デフォルトの位置 (親コンテナの左上隅) に留まります。

.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

にそれぞれ設定した場合の効果を示しています。

#.box-4

絶対配置、

.box-2CSSの絶対位置を徹底分析して徹底理解! および

.box-3

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

#元のアドレス: https://juejin.cn/post/7008462323316686862

著者: M Cool 詳細については、プログラミング関連の知識については、プログラミング入門をご覧ください。 !

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

声明:
この記事は掘金--M酷で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。