絶対位置の理解 <br> /* 1. 位置が設定される前に、図 1 に示すように、大きなボックスが小さなボックスを包みます。これは標準のドキュメント フローに準拠しています<br> .box1{<br> width : 500px ;<br> 高さ: 500px;<br> 背景:赤;<br> }<br> .box2{<br> 幅: 200px;<br> 高さ: 200px;<br> 背景:青;<br> }*/</p> <p>写真1</p> <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719142646685-675746292.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p><br> /*2. 絶対配置では、要素の位置がドキュメント フローから独立するため、スペースを占有しません。 <br> これは、実際には通常のフロー位置決めモデルの一部とみなされている相対位置決めとは異なります。<br> 要素の位置は通常のフロー内の位置を基準としているためです。絶対的に配置された要素は、最も近い配置された祖先を基準にして配置されます。 <br> 要素に配置された祖先がない場合、その位置は元の包含ブロックを基準に配置されます。図 2 に示すように、<br> .box1{<br> 幅: 500px;<br> 高さ: 500px;<br> 背景:赤;<br> 位置: 相対;<br> }<br> .box2{<br> 幅: 200px;<br> 高さ: 200px;<br> 背景:青; <br>位置:絶対;<br>上:150ピクセル;<br>左:150ピクセル;</p> <p>}*/</p> <p>写真2</p> <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719142728951-1955957836.png" alt="" style="max-width:90%" style="max-width:90%"><br><br> /*3. Box2 には幅と高さがなく、位置を設定しないと、box2 は標準のドキュメント フローに従い、ドキュメントの位置を占めます <br> 幅は親の幅を継承します。画像 3 に示すように、<br> .box1{<br> width: 500px;<br> height: 500px;<br> background:red;<br> }<br> .box2{<br> background:blue;<br> と高さがコンテンツによって決まります。 }*/</p> <p>写真3</p> <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719143010232-93629660.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p><br> /*4. Box2 には幅と高さがありません。位置決めが設定されている場合、box2 はドキュメント フローから切り離され、位置は相対位置決め要素に対して指定されます。つまり、幅は無効になります。幅と高さはコンテンツによって自動的に拡張されます。画像 4 のように、幅と高さが必要な場合は、個別に設定する必要があります */<br> .box1{<br> width: 500px;<br> height: 500px;<br> background :red;<br>位置:相対;<br> }<br> .box2{<br>背景:青; <br>位置:絶対;<br>上:150ピクセル;<br>左:150ピクセル;<br> }<br> </p>写真4<p> </p> <p><img src="http://images2015.cnblogs.com/blog/966054/201607/966054-20160719143044982-531229238.png" alt="" style="max-width:90%" style="max-width:90%"> </p> これは小さなボックスです < ;/body>