CSS 相対位置、絶対位置_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 相対位置、絶対位置_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:01

オリジナル

1260 人が閲覧しました

CSS 位置決め属性:position。

配置の基本的な考え方: 要素ボックスが通常の位置を基準として、または親要素、別の要素、またはブラウザウィンドウ自体を基準として表示される場所を定義します。

位置属性値: static、relative、absolute、fixed。

以下のテストはすべてFirefox 40.0で実施しました。

使用する基本コード:

 1 <style> 2         body{ 3             margin: 30px 0 0 30px; 4             padding: 0; 5         } 6         .div1{ 7             width: 200px; 8             height: 200px; 9             padding: 50px;10             background: red;11         }12         .div2{13             width: 50px;14             height: 50px;15             background-color: blue;16         }17         .div3{18             background-color: pink;19             width: 80px;20             height: 50px;21         }22         .div4{23             background-color: gray;24             width: 80px;25             height: 50px;26         }27 </style>

ログイン後にコピー

1 <body>2     <div class="div1"><div class="div2">div2</div>div1</div>3     <div class="div3">div3</div>4     <div class="div4">div4</div>5 </body>

ログイン後にコピー

通常の配置: 静的、デフォルト。位置属性が設定されていない場合は、通常のドキュメントフローに従って配置されます。

固定位置: 固定、絶対位置の 2 番目のケース (下記を参照)。

相対配置: 相対的、要素フレームは (元の位置に対して) 一定の距離だけオフセットされ、元の位置空間は保持されます。

1 .div3{2     background-color: pink;3     width: 80px;4     height: 50px;5     position: relative;6     left: 300px;7 }

ログイン後にコピー

DIV3は左に300pxオフセットされており、元の位置はそのままです（DIV4は貼り付けられていません）。

要素に親要素がある場合も同様です。

1 .div2{2     width: 50px;3     height: 50px;4     background-color: blue;5     position: relative;6     left: 250px;7 }

ログイン後にコピー

絶対配置: 要素ボックスは通常のドキュメントフローで閉じられた空間を占有し、その要素ボックスを含むボックスに対して相対的に配置されます。包含ボックスは、ドキュメント内の別の要素ボックスまたはウィンドウ自体である場合があります。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロックレベルのボックスを生成します。

2つの状況に分けられます:

親要素/祖先要素の配置モードが相対または絶対の場合、この親要素/祖先要素に対して相対的に配置され、配置開始点は左上隅になります親要素/祖先要素の。注意: 親要素/祖先要素にパディングが設定されている場合、配置はパディングの左上隅から開始されます。
親要素/祖先要素に相対位置または絶対位置が設定されていない場合は、ブラウザウィンドウに対して相対的に配置されます (本文の内側と外側のマージンに関係なく、ウィンドウの左上隅を基準に)。

最初のケース:

.div1{    position: relative;    width: 200px;    height: 200px;        padding: 50px;    background: red;}.div2{    position: absolute;    left: 300px;    top: 0;    width: 50px;    height: 50px;        background-color: blue;}

ログイン後にコピー

上の図から明らかですが、DIV2 は DIV2 の元の位置ではなく、パディングの左上隅から開始して左に 300px オフセットされています (ifパディングは 0 で、元の位置からのものです)。

DIV1の外側のマージンを30px、DIV2の左と上のオフセットを0に設定します。

 1 .div1{ 2     position: relative; 3     margin: 30px; 4     width: 200px; 5     height: 200px; 6     padding: 50px; 7     background: red; 8 } 9 .div2{10     position: absolute;11     left: 0;12     top: 0;13     width: 50px;14     height: 50px;15     background-color: blue;16 }

ログイン後にコピー

親要素ボックスに外部マージンがある場合、オフセットも内部マージンから開始されることがわかります。

2番目のケース:

ボディの内側のマージンが30px増加し、DIV2が360px右にオフセットされます。

body{    margin: 30px 0 0 30px;    padding: 30px;}.div1{        width: 200px;    height: 200px;    padding: 50px;    background: red;}.div2{    position: absolute;    left: 360px;    top: 60px;    width: 50px;    height: 50px;    background-color: blue;}

ログイン後にコピー

左ボディのマージンは外側マージンと内側マージンがそれぞれ 30px あり、DIV2 は 30px+30px+300px=360px オフセットされており、DIV1 と正確に位置合わせされています。内側と外側のマージンに関係なく、オフセットがウィンドウの左上隅からのものであることを証明してください。