■ 位置を指定する方法
HTML で位置を指定するときは<center>タグを使ったり、align 属性または valign 属性などを使って、左寄せ、右寄せ、上に配置、下に配置、中央に配置などを指定しました。CSS を使うと、上・下・左・右・中央といったおおまかな位置指定だけではなく、長さの単位を用いた位置指定ができます。前のページで勉強したボックスのマージンと合わせて使えば、かなり詳細な位置指定ができるようになります。
| プロパティ | 値 | 説明 |
| position | absolute | 絶対的な位置指定 |
| relative | 相対的な位置指定 |
top
left
right
bottom | 単位 | mm,cm,pt,pxなど |
| ％ | 親要素の指定値に対する割合 |
| auto | 自動調整 |
| z-index | 番号 | 数字１２３ |
| auto | 自動調整 |
◆絶対的な位置指定
position プロパティは位置の指定方法を決めます。絶対的な位置を指定するときは、プロパティ値を absolute にします。
絶対的な位置は、まわりの段落（ブロック）や画像などに関係なく、ある基準（通常は画面の端）からどのくらい離れているかで決定されます。
<html>
<head>
<title>絶対的な位置指定</title>
<style type="text/css">
<!--
div{
background-color:#60f;
color:#fff;
width:300px;
padding:10px;
position:absolute;
}
.position1{
background-color:#f60;
top:200px;
left:150px;
}
.position2{
background-color:#080;
top:300px;
left:300px;
}
-->
</style>
</head>
<body>
<div>
CSS での位置指定は、まず position プロパティで「絶対的な指定」か「相対的な指定」かを決定し、その後 top left right bottom プロパティで上からの位置、左からの位置などを指定します。<br>
ここは位置指定をしていません。
</div>
<div class="position1">
ここは上から200px、左から150pxの位置になります。
</div>
<div class="position2">
ここは上から300px、左から300pxの位置になります。
</div>
</body>
</html>
ページはこのように表示されます。 ★ absolute1
このページのクラスを下のように変えてみます。
.position1{
background-color:#f60;
top:135px;
left:150px;
}
.position2{
background-color:#080;
top:180px;
left:300px;
}
ページはこのように表示されます。ボックスが重なって表示されていますね。
★ absolute2
◆相対的な位置指定
相対的な位置指定には、position プロパティの値として、relative を使います。相対的な位置は、何も指定しないで HTML を記述していったときの位置からどのくらい離れているかで指定します。
最初に HTML で記述してブラウザで確認してから、左に50pxずらしてみようと思ったら left プロパティの値を -50px とし、100px 下げようと思ったら top プロパティの値を 100px とします。
<html>
<head>
<title>相対的な位置指定</title>
<style type="text/css">
<!--
div{
background-color:#60f;
color:#fff;
width:300px;
padding:10px;
position:relative;
}
.position3{
background-color:#f60;
}
.position4{
background-color:#f60;
top:50px;
left:150px;
}
.position5{
background-color:#f60;
top:100px;
left:300px;
}
-->
</style>
</head>
<body>
<div>
相対的な位置指定を行う場合は、まず何も考えずに HTML で記述してブラウザで位置を確認してみます。
</div>
<div class="position3">
ここが特に位置を指定しないときの位置です。ここが基準となります。
</div>
<div class="position4">
ここは下に50px、右に150pxずらした位置になります。ボックスの幅が300pxですから、このボックスの左端は基準となるボックスのちょうど真ん中になりますね。
</div>
<div class="position5">
ここは下に100px、右に300pxずらした位置になります。このボックスの左端は基準となるボックスのちょうど右端になります。
</div>
</body>
</html>
ページはこのように表示されます。 ★ relative
top プロパティを使って上にずらしたいときの値はマイナス（−）、left プロパティを使って左にずらしたいときの値はマイナス（−）です。間違えないようにして下さいね。
もちろんプロパティ値によっては、重ね合わせることもできます。
◆重ね合わせの順番を指定する
段落（ブロック）や画像が重なったとき、通常は HTML ファイルにあとから記述した方が前に来ます。
z-index プロパティを使えば、重ね合わせの順番を指定することができます。プロパティ値として数字を使いますが、数が大きい方が前になります。最初が１でなくてもかまいません。とにかく数が大きいほど前に来ます。
先ほど「絶対的な位置指定」で使ったファイル（ absolute2 ）を使ってみます。
CSS を記述した部分に下のように、z-index プロパティを書き加えてみて下さい。
div{
background-color:#60f;
color:#fff;
width:300px;
padding:10px;
position:absolute;
z-index:6;
}
.position1{
background-color:#f60;
top:135px;
left:150px;
z-index:5;
}
.position2{
background-color:#080;
top:180px;
left:300px;
z-index:4;
}
ページはこのように表示されます。上のブロックの方がプロパティ値が大きいので、前面に来ましたね。
★ z-index
|
