子ボックスや孫ボックスなどに position: absolute; と指定するとそれぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができますトランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

(1)

1116 位置の記述方法について（position, top, right, bottom, left）

ここまでの説明では、ボックスの大きさを変えると、その後ろや下にある他のボックスの位置が移動してしまいました。それは margin プロパティが隣接するボックスとの間の空白を指定しているからです。 position プロパティを使用すると、ボックスの配置位置を指定して位置を固定させたり、移動できるようにすることができます。 ■

position

ボックスの配置方法（基準位置）を指定します。値説　　　　　明 static relative absolute fixed ウィンドウの表示領域を基準にした絶対配置になる。スクロールしても位置が固定されたままになる。特に配置方法を指定しない。この値の時にはtop、bottom、 left、rightは適用されない。（初期値）相対位置への配置になる。 positionプロパティのstaticを指定した場合に表示される位置が基準位置になる。絶対位置への配置になる。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上または右下が基準位置になる。　親ボックスにpositionプロパティのstaticが指定されている（またはpositionが指定されていない）場合には、ウィンドウ全体の左上または右下が基準位置になる。 position プロパティを使用してボックスの配置方法を指定し、実際のボックスの配置位置は次のように top プロパティ、bottom プロパティ、left プロパティ、right プロパティを使用して指定します。

・ top と left で指定し、親ボックスの左上端から配置するボックスの上端（top）の距離と左端（left）の距離を指定します。

・ top と right で指定し、親ボックスの右上端から配置するボックスの上端（top）の距離と右端（right）の距離を指定します。・ bottom と left で指定し、親ボックスの左下端から配置するボックスの下端（bottom）の距離と左端（left）の距離を指定します。・ bottom と right で指定し、親ボックスの右下端から配置するボックスの下端（bottom）の距離と右端（right）の距離を指定します。通常は top プロパティと left プロパティで指定します。

【重要】top、left、bottom、right の指定は、position プロパティの値が static の場合（または position の指定がない場合）には適用されません。

(2)

top、bottom、left、right

上下左右からの距離で配置する位置を指定します。値説　　　　　明数値＋単位数値＋pxなどの単位を付けて指定パーセント（%） auto 要素の種類などに応じて自動的に調整される。（初期値）親ボックスの幅、高さを基準とした割合をパーセント（%）で指定

top、bottom、left、right は、配置するボックスの position プロパティの値が absolute、 relative 又は fixed の時に有効です。

≪Position プロパティの値の違いによる top、bottom、left、right の適用の違い≫ 親ボックスの position プロパティの値を absolute、relative、または fixed に指定した

場合に、子ボックスの position プロパティの指定の違いにより、子ボックスの配置がどのように違うのか見てみましょう。ここでは親ボックスの position プロパティの値は absolute に指定しています。親ボックス（parent）と子ボックス（child1～child6）の配置位置、幅、高さ、色を次のように指定した場合で説明します。

parent ･･･幅 200px、高さ 200px

child1 ･･･ top 50px、left -100px、幅 50px、高さ 50px、色 lightgreen child2 ･･･ top -30px、left -30px、幅 50px、高さ 50px、色 skyblue child3 ･･･ top 50px、left 30px、幅 50px、高さ 50px、色 salmon child4 ･･･ bottom 50px、right 30px、幅 50px、高さ 50px、色 yellow child5 ･･･ bottom -30px、right -30px、幅 50px、高さ 50px、色 orange child6 ･･･ bottom 50px、right -100px、幅 50px、高さ 50px、色 violet

● position: absolute; の場合

親ボックスに position プロパティの absolute、relative または fixed が指定されている場合には、親ボックスの左上端または右下端が基準位置となります。（注：親ボックスに position プロパティの absolute、relative または fixed が指

定されていない場合に、子ボックスを position: absolute;で指定し top、bottom、 left、right で配置位置を指定しようとしても、top、bottom、left、right の指定は適用されません。）

(3)

parent

child1 child2 child3 child4 child5 child6 top: 50px; left: -100px; top: -30px; left: -30px; left: 30px; top: 50px; right: 30px; bottom: 50px; right: -30px; bottom: -30px; right: -100px; bottom: 50px;

● position: static;（または position の指定がない場合）の場合

特に配置方法を指定しません。この値の時には top、bottom、left、right は適用されません。

parent

child1 child2 child3 child4 child5 child6 ● position: relative; の場合 position プロパティの static を指定した場合に表示される位置が基準位置となります。

(4)

parent

child1 child2 child3 child4 child5 child6 child1 child2 child3 child4 child5 child6 top: 50px; _left: -100px; top: -30px; left: -30px; top: 50px; left: 30px; bottom: 50px; right: 30px; bottom: -30px; right: -30px; bottom: 50px; right: -100px; ● position: fixed; の場合ウィンドウの表示領域を基準にした絶対配置となります。ウィンドウの表示領域の左上端または右下端を起点とした配置になります。背景画像などの場合に指定する場合があり、スクロールしても画像の位置が固定されたままになります。なお、サンプルではトランジションが動くステージ（舞台）として幅 500px、高さ 400px のボックス（id 名 #stage）を指定していますが、このステージのボックスを HTML 文書に埋め込みたい場合は、このステージのボックスの position プロパティの値を relative に指定すれば、ステージとその周囲のコンテンツとの配置を従来通り margin で指定でき、しかも子ボックスや孫ボックスには position プロパティの値を absolute で指定できます。

(5)

BoxChange.html と違うところは、<div>要素に id 属性で stage と名づけたボックスを、変化させる４つのボックス（id 名 box1～box4）を囲むように記述します。これで id 名 stage のボックスが親ボックスとなり、変化させる４つのボックス（id 名 box1～box4）が子ボックスとなったわけです。サンプルＣＳＳ <!DOCTYPE html> <html> <head> <title>PositionTopLeft</title> <meta charset="UTF-8">

<body>

<p>■ボックスの大きさを変えても位置が移動しないようにする。</p> <div id="stage">

<div id="box1" onClick="className='anime1'"><font class="font1">Click</font></div> <div id="box2"><font class="font1">Hover</font></div>

<div id="box3" onClick="className='anime3'"><font class="font1">Click</font></div> <div id="box4"><font class="font1">Hover</font></div>

</div>

</body> </html>

(6)

© 2016 電脳 Papa 6 〔CSS の記述（PositionTopLeft.css）〕先ず id 名 #stage と名づけたボックスを指定します。トランジションが動くステージ（舞台）と考えてください。ここではステージが親ボックスとなります。ステージの position プロパティの値は relative で指定します。次に、子ボックスを４つ使用するので、BoxChange.css のように、それぞれ変化させる方法を記述します。このときそれぞれのボックスには position: absolute; と指定します。配置する位置は、top と left で指定します。 ≪Positionプロパティによる絶対位置の配置方法≫ 親ボックス（<div id="stage">）子ボックス４ <div id="box3"> 子ボックス１ <div id="box1"> 子ボックス３ <div id="box3"> 子ボックス２ <div id="box2"> 50px 50px 50px 50px 200px 200px 220px 220px

Click

Hover

#stage { margin: 0px; width: 450px; height: 400px; background-color: white; border: solid 1px black; position: relative; } #box1 { top: 50px; left: 50px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute;

(7)

© 2016 電脳 Papa 7 最後に、各ボックスの中に表示するテキスト文字のフォントを.font1 クラスとして指定します。 #box1.anime1 { width: 120px; height: 120px; background-color: yellow; border-color: orange; } #box2 { top: 200px; left: 50px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; } #box2:hover { width: 120px; height: 120px; background-color: pink; border-color: magenta; } #box3 { top: 50px; left: 220px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; } #box3.anime3 { left: 300px; background-color: lightgreen; border-color: limegreen; } #box4 { top: 200px; left: 220px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; } #box4:hover { left: 300px; background-color: skyblue; border-color: blue; }

(8)

では、PositionTopLeft.html をブラウザで表示させて、クリックや hover してみましょう。

ボックスの大きさを変化させても、周りのボックスの位置が移動しなくなったでしょう。これは、PositionTopLeft.css で、変化させる４つの子ボックス（id 名 box1～box4）に指定した position: absolute; により、親ボックス（id 名 stage のボックス）の左上端を基点にして絶対位置に配置されているため、周りの子ボックスからの影響を受けないからです。

.font1 { color: black;

font: bold 28px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 100px;