1. 要素の位置属性の値が絶対値である場合、次の 2 つの状況があります:
1. 位置属性が親 (直接の親と間接的な親を含む) 要素で定義されていない (つまり、 、デフォルトの属性は static です)、要素はページを参照し、ページに基づいて配置され、top や left などの属性はページを参照します。
要素の幅と高さの属性がパーセンテージの場合、これら 2 つの属性はページの幅と高さも参照します。
<!doctype html><html><head><meta charset="utf-8"><style>*{margin: 0; padding: 0;}#div1 { width: 200px; height: 200px; background: #ccc;}#div2 { width: 50%; height: 50%; background: #aaa; top: 100px; left: 100px; position: absolute;}</style></head><body><div id="div1"> <div id="div2"></div></div></body></html>上記のコードでは、div2 が絶対配置され、その親要素にposition 属性が設定されていない場合、要素はページを参照して配置されます。
図からわかるように、div2 はページに対して相対的に配置され、その幅と高さはページの幅と高さの半分です。
コンソールからわかるように、ページの幅と高さは div2 要素のちょうど 2 倍です。
2. 親要素が位置属性 (相対または絶対) を定義している場合、親要素を参照します。
<!doctype html><html><head><meta charset="utf-8"><style>*{margin: 0; padding: 0;}#div1 { width: 200px; height: 200px; background: #ccc; position: relative; top: 100px; left: 100px;}#div2 { width: 50%; height: 50%; background: #aaa; top: 100px; left: 100px; position: absolute;}</style></head><body><div id="div1"> div1 <div id="div2">div2</div></div></body></html>図からわかるように、div2 は div1 を基準に配置され、幅と高さも div1 を基準にしています
2. 要素のposition 属性値が相対である場合、要素は通常の位置 (つまり、position:static) の位置を基準としています。
デフォルトでは、幅は親コンテナを埋め、高さはコンテナ自体のコンテンツに基づいて決定されます。親要素の最初の子要素の場合、位置は親要素の左上隅になります。
次に、その位置とサイズを設定するときに、それ自体を基準として使用します。高さを設定するときは、親コンテナーを充填した状態を基準として使用します。 ❤️
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
