［CSS］positionの基礎
今日の講義はpositionについてです。
positionが使われているのはどんなところ？
例えば 「ケンコーコム」
一番上にあるロゴやグローバルナビは、CSSを無効化してみると、
HTMLのかなり下の方に記述されているのがわかります。
このように、HTMLで記述された順序通り順ではなく、
任意の場所に部品を配置したり、あるいは部品を重ねたり
↑ このように小さな写真をたくさん並べることも、positionでできます！
floatでは無理。
☆HTMLが文書構造であるのに対し、CSSは装飾を設定します。
別の言い方をすると、
HTMLでは検索エンジンという機械に読ませたい重要なことを優先的に記述する。
CSSは人が読みやすいように装飾や配置を設定する。
役割が違います。
練習①
３つの箱（divで面積を確保する）
wrapper（親box） 300 × 300px
box1（子box） 100 × 100px
box2 （子box） 150 × 150px
①通常だとこんな状態
<body>
<div id="wrapper">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
</body>
②次に、 親box、子boxにそれぞれpositionを指定します
親box { position: relative;
left: 100px;
top: 100px; }
子box{ position: absolute;
left: 100px;
top: 100px; }
↓ こうなります
親boxの位置が、左から100px、上から100px分移動しました
子boxは、親の左上を基点にして左から100px、上から100px移動しています。
また、子boxは移動距離が２つとも全く同じなので、子box1は下に隠れてしまっています。
CSSの記述した順番が後ろのものが上に重なっていくので、サイズの大きいbox2が上になるのです。
③z-indexで上下の重なりを指定する
box1をbox2の上にするためには、z-indexを設定します。
#box1 {
width: 100px;
height: 100px;
background: #DE759E;
position: absolute;
left: 100px;
top: 100px;
z-index: 200;
}
#box2 {
width: 150px;
height: 150px;
background: #A4CCD4;
position: absolute;
left: 100px;
top: 100px;
z-index: 100;
}
数値の大きい方が上になります。↓
テキスト等には"z-index: 1""z-index: 2""z-index: 3"・・・と書いてありますが、現場では100、200と使うようです（先生談）
