ITエンジニアのための技術支援サイト
position
要素の配置方法を指定します。従来の要素を上から順に配置する方法と、座標を指定して配置する方法があります。
座標を指定する場合は、「top、bottom、left、right」の各プロパティに値を指定します。
ブラウザ
IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac
書式
要素[.class名][#id名]{ position : 値; }
指定できる値
| 値 | 初期値 | 意味 |
| static | ○ |
自動配置されます(通常の配置方法)。 この値を指定した場合、「top、bottom、left、right」プロパティの指定は無効になります。 |
| absolute | このプロパティを指定すると、他の要素に関係なく、ウィンドウの上端、下端、左端、右端からそれぞれ「top、bottom、left、right」プロパティで指定した位置に配置されます。尚、位置の算出において、ブラウザには各固有の余白があり、それぞれの表示位置には若干のズレが生じるようです。 | |
| relative |
本来表示される位置から、相対的に配置位置を指定します。 このプロパティを指定すると、本来表示される場所には、相応の空間が空くようです。「top、bottom、left、right」の各プロパティに指定した値が正の数の場合は、それぞれ、本来表示される位置の上端から下、下端から上、左端から左端、右端から右端までの距離を意味します。fixedやabsoluteとは違い、ブラウザ固有の余白は含めない配置となるようです。 |
|
| fixed |
absolute指定と同様に、ウィンドウの上端、下端、左端、右端からそれぞれ「top、bottom、left、right」プロパティで指定した位置に配置され、かつスクロールを行っても表示位置が変わりません。但し、InternetExploreは未対応です。 尚、位置の算出において、ブラウザには各固有の余白があり、それぞれの表示位置には若干のズレが生じるようです。 |
|
| inherit | 親要素の値を継承します。 |
サンプル
ソースコード
<html>
<head>
<title>サンプルコード</title>
<style type="text/css">
#sample1 {
position : static;
background-color : #CC99FF;
width : 300px;
left : 150px;
}
#sample2 {
position : absolute;
background-color : #FFC0CB;
width : 300px;
left : 150px;
}
#sample3 {
position : fixed;
background-color : #AFEEEE;
width : 300px;
top : 200px;
}
#sample4 {
position : relative;
background-color : #FF99FF;
width : 300px;
top : 200px;
}
</style>
</head>
<body>
<div id="sample1">sample1[position:static][left:50px]</div>
<div id="sample2">sample2[position:absolute][left:50px]</div>
<div id="sample3">sample3[position:absolute][top:200px]</div>
<div id="sample4">sample4[position:absolute][top:200px]</div>
</body>
</html>