CSS の位​​置決めとカスケード_html/css_WEB-ITnose

Position: static (静的位置決め)

Position 属性が static として定義されている場合、要素は静的位置として定義できます。いわゆる静的位置は、HTML ドキュメント フロー内で各要素が持つべき位置です。

位置の位置決めの問題。したがって、position 属性が定義されていない場合、要素は静的な位置としてデフォルトの表示に従い、座標値によってその位置を変更することはできません。 （上、左、右、下）。

Position: ABSOLUTE (絶対配置)

Position 属性が ABS として定義されている場合、要素はドキュメント フローから切り離され、ドキュメント フローの影響をまったく受けません。その位置は座標に従って配置されます。ある参照オブジェクトの絶対配置要素が表示されていない場合、上、右、下、左の配置属性が表示されている場合でも、ドキュメント フローから切り離されておらず、相対的な配置特性を持っています。ですが、ドキュメント フローにおけるその位置はもう存在しません。絶対位置決めが X 軸または Y 軸の位置決めのみを表示する場合、この方向の位置決め機能のみがあり、他の方向には相対位置決め機能が表示されます。

座標値:

上: 配置された要素の上部外壁から参照要素の上部内壁までの距離を表します

右: 配置された要素の右外壁から右内壁までの距離を表します参照要素の壁

左: 位置決め要素の左外壁を表します 参照要素の左内壁までの距離

下: 位置決め要素の下部外壁から下部内壁までの距離を示します参照要素の

<div id="box">box                                                            <div id="boxA">boxA</div>    <div id="boxB">boxB   <div id="boxC">boxC</div>   <div id="boxD">boxD</div>  </div> </div>

#box{ margin:40px auto; width:400px; height:400px; border:2px red solid;}#boxA{ position:absolute; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0;}

大きなボックス box は Web ページ全体で上から 40px の中央に配置されていますが、boxA は絶対位置として配置されているため、大きなボックスから 100px 離れた位置に配置されています。 Web ページ全体の左と上から 100 ピクセルの要素が絶対位置として定義されている場合、その座標属性 (上、左、下、右) を組み合わせることで正確に配置できます。その位置

位置: 相対 (相対)相対配置は、静的配置と絶対配置の間のバランスを見つけるための妥協方法のようなものです。いわゆる相対配置は、適用された要素がドキュメント フローから外れないようにするためのものですが、オフセットすることができます。座標値を通じて元の位置を基準として使用します。

座標値:

top: 配置された要素の上部外壁から元の位置の上部外壁までの距離を表します

right: 配置された要素の右外壁から右への距離を表します元の位置要素の外壁

左: 配置された要素の左の外壁を表します 元の位置の要素の左の外壁までの距離

下: 配置された要素の下部の外壁から位置までの距離を示します元の位置要素の下部外壁

1 <div id="box">2      <div id="boxA">boxA</div>3      <div id="boxB">boxB4       <div id="boxC">boxC</div>5       <div id="boxD">boxD</div>6         </div>7     </div>

#box{ margin:40px auto; width:400px; height:400px; border:2px red solid;}#boxA{ position:relative; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0;}#boxB{ width:50px; height:150px; background: #B9C8C5;}#boxC{ width:50px; height:50px; background: #1D92C8;}#boxD{ width:400px; height:50px; background: #086499;}

位置が次のように定義されているため、要素 boxA が独自の位置に対してオフセットされている場合、大きなボックス box は Web ページ全体の上から 40px の中央に配置されます。相対位置は、元の位置に従って左に 100 ピクセル、上に 100 ピクセルになります。ボックス D に遭遇すると、ボックス D が上書きされます。相対的な位置が元の位置から外れても、元の位置が占めていた空間は保持され、他の要素によって占有されることはありません。

位置: 固定 (固定配置)

固定配置は、Web ページ要素を定義するための参照としてブラウザー ウィンドウを使用します。要素が固定表示されるように定義されている場合、その要素は表示されなくなります。ドキュメントフローの影響を受けます。彼は常にブラウザ ウィンドウを使用してディスプレイの表示位置を設定します。ブラウザ ウィンドウがどのようにスクロールしても、ブラウザ ウィンドウのサイズが変化しても、要素はブラウザ ウィンドウに表示されます。平たく言えば、ブラウザ ウィンドウの 4 つの辺が、要素を配置するための座標系として使用されます。

1 <div id="box">box </div> 2 <div id="fixed">fixed</div>

 1 #box{ 2  margin:40px auto; 3  width:400px; 4  height:400px; 5  border:2px red solid; 6  position:fixed; 7 left:100px; 8 top:100px;  9 }10 #fixed{11  height:4000px;12 }

ボックスが固定位置として定義されている場合、ボックスは常にブラウザ ウィンドウ内に表示されます。また、fixed 属性を使用して、ブラウザから左、右、上などのさまざまな境界線を制御することもできます。そして一番下の位置。

相対位置と絶対位置:

<div id="box">box  <div id="boxA">boxA</div>  <div id="boxB">boxB   <div id="boxC">boxC</div>   <div id="boxD">boxD</div>  </div> </div>

如果box把 position属性定义为relative，只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位，而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative，它底下的子元素boxC和boxD就能相对于父元素boxB来定位，所以，把position属性定义为relative的元素，只有它的子元素才能相对它定位，孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素，设计出更强大的布局效果。

position属性定位小工具： www.linxz.de/css_tool/position_demo.html

层叠：

css可以通过 z-index 属性来排列不同定位元素之间的层叠顺序，该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。

1  <div id="box">box2   <div id="boxA">boxA</div>3   <div id="boxB">boxB</div>4   <div id="boxC">boxC</div>5  </div>

 1 #boxA,#boxB,#boxC{ 2  width:100px; 3  height:200px; 4  position:absolute; 5 } 6 #boxA{ 7  background: #086499; 8  z-index:1; 9  left:100px;10 }11 #boxB{12  top:50px;13  left:50px;14  background: #B9C8C5;15  z-index:2;16 }17 #boxC{18  top:100px;19  background: #1D92C8;20  z-index:3;21 }

boxC排在最上面，boxB在最中间，boxA在最后。z-index的值越大越靠前。

第一次写博客，写的不好，请各位看官多多指正。