CSS PositionAbsoluteを一度だけ理解する方法

オブジェクトがどのように配置されているかを理解することで、画面上の要素を失うのを防ぎます

要素の配置は、要素自体よりも要素のコンテナの位置に関係します。自分自身を配置できるようにするには、自分自身を相対的に配置する親divを知っている必要があります。

以下のコードは、4つのネストされたdivを示しています。で集中しているとだけ。は設定されておらず、ドキュメントフローのデフォルトの位置にあります。.box-1.box-3display: flexmargin: auto.box-4margin

positionプロパティは、すべての要素に設定されていません。

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

自分自身を配置できるようにするには、要素は2つのことを知っている必要があります。

  • そのための座標xyのいずれかによる位置セットtoprightbottomleft
  • 自分自身をどの親に配置するか

要素に適用するposition: absolute.box-4、から削除されますnormal document flow。座標が設定されていないため、左上隅の親divであるデフォルトの位置にとどまります。

設定することにより、top: 0およびleft: 0要素、それが基準点として検討していきますどの親知っている必要があります。参照するには、要素を画面に配置する必要がありますposition: relative.box-4次に、親divが配置されているかどうかを尋ね始めます。最初に、それは尋ねて、答え.box-3として得No, I am not positioned.ます。それらのすべてが持っているので、同じことが、.box-2そして次に.box-1当てはまりますposition: unset

ASが.box-4配置され、親を見つけることができませんでした、それはへの相対的な自分自身を配置しますbody。その要素は常に画面に配置されます。

に設定position: relativeする.box-1と、.box-4尋ねられたときに:答えとしてAre you positioned?取得さYes I am.れます。そして、次の.box-4相対位置に配置され.box-1ます:

同じことがのために行く.box-2.box-3

絶対的に配置された要素は、最も近い位置にある祖先を基準にして配置されます。

配置された祖先が見つかるとすぐに、その上の要素の位置は関係ありなくなります。下の画像は、設定上のレイアウトを表示position: relativeする.box-2 .box-3、それぞれ:

また、Code Sketch Channel?でビデオの説明を見つけることができます。

読んでくれてありがとう!✌️

もともとはmarina-ferreira.github.ioで公開されました。