要素の配置方法。positionプロパティ
position:static; position:relative; position:absolute; position:fixed;
position : static;
position : relative ;
top : 0px ; left : 0px ;
position:absolute;
top: 50px ; left: 150px ;
position : relative ;
top : 10px ; left : 50px ;
positionプロパティの指定なし
position:absolute;
bottom: 10px ; right: 10px ;
上のボタンを押すとBOX-3、BOX-4が本来配置される位置（通常位置）に戻ります。
もう一度押すとそれぞれ指定した位置に移動します。
ボックスの移動は要素のID名を動的に換えてスタイルを変更で行っています。
*BOX-3 は親要素が基準位置になり指定した値だけ移動します。
移動前の領域（高さ、幅）は確保されずBOX-4、BOX-5 がせり上がります。
*BOX-4は、BOX-2の左下が通常位置になりここを基準位置に
指定した値だけ移動しています。
通常位置には移動した要素"BOX-4"の領域が確保されたままになっています。
ロリポップ！のドメインは選べる全８５種類！！
さくらのレンタルサーバ スタンダード
サンプルソース
<html>
<head>
<title>CSS positionプロパティ</title>
<style type="text/css">
<!--
/*配置のサンプルソースだけです。移動はしません。*/
.parDiv { /* 親要素 */
width: 450px;
height: 350px;
background-color: #f0ffff;
border : 1px solid black;
padding: 2px;
position: relative; /* 相対配置 */
}
.parDiv div {/* 子要素 */
width: 200px;
height: 50px;
padding: 8px;
}
#posi1 {
position: static; /* 通常配置 */
background-color: #ffff00;
}
#posi2 {
position: relative; /* 相対配置 */
top: 0px; left: 0px;
background-color: #adff2f;
}
#posi3 {
position: absolute;/* 絶対配置 */
top: 50px; left: 150px;
background-color: #ee82ee;
}
#posi4 {
position: relative;
top: 10px; left: 50px;
background-color: #afeeee;
}
#posi5 {
background-color: #ffdece;
}
#posi6 {
position: absolute;
bottom: 10px; right: 10px;
background-color: #d8bfd8;
}
#fix {position: fixed;/* 固定配置 */
bottom: 5px; right: 5px;
color: red; background-color: white;
font-size: 25px; font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="parDiv">* ボーダーに囲まれた領域が親要素です。
<div id="posi1">BOX-1<br>
position : static;</div>
<div id="posi2">BOX-2 <br>
position : relative ;<br>
top : 0px ; left : 0px ;</div>
<div id="posi3">BOX-3 <br>
position:absolute; <br>
top: 50px ; left: 150px ;</div>
<div id="posi4">BOX-4 <br>
position : relative ;<br>
top : 10px ; left : 50px ;</div>
<div id="posi5">BOX-5 <br>
positionプロパティの指定なし</div>
<div id="posi6">BOX-6 <br>
position:absolute; <br>
bottom: 10px ; left: 10px ;</div>
</div>
<div id="fix">position:fixed;</div>
</body>
</html>
position プロパティ
要素の配置のしかた（相対配置か絶対配置）を指定します。実際の配置場所は
top,left,bottom,right の位置を指定するプロパティを使い相対配置または絶対配置の基準位置（
top,left は左上。bottom,right は右下）からの位置を指定します。
position: static;
通常位置に配置されます。通常の位置とは、なにも指定がなければ本来配置される位置のことです。
top,left,bottom,right プロパティは適用されません。 * BOX-1
position: relative;
本来配置される位置からtop,left,bottom,right プロパティでどのくらい移動させるかを指定します。相対配置（相対位置）といいます。 * BOX-2 BOX-4
position: absolute;
親要素の上、下、左、右、の各辺を基準位置にしてtop,bottom,left,right プロパティでどのくらい移動させるかを指定します。絶対配置（絶対位置）といいます。
親要素には position：static 以外の position を指定し(当ブログでは relative)
そのなかに子要素を入れて position:absolute を指定をします。* BOX-3 BOX-6
親要素がなければブラウザ枠が基準位置になります。
position: fixed;
ブラウザ枠が基準位置となり、絶対配置 absolute で配置されますがスクロールしても位置が変わりません。
ヘッダやフッダ、メニューの固定などに使えますが残念なことにIE6では未対応です。
サンプルは非表示にしてあります。下のボタンを押すとページの右下に表示されます。
positionプロパティ 使用サンプル
オンマウスで吹き出し説明文がポップアップa:hoverで、へこむアンカーテキスト、リンクボタン
テーブル（表）のセルを重ね、ずらして表示しますz-index
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
画像のズームアップ 初歩編
ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
top,left,bottom,rightプロパティ
position: relative; は本来配置される位置が基準位置になります。position: absolute; は親要素が基準位置になります。
top ： 基準位置の上辺から配置するボックスの上端までの長さ left： 基準位置の左辺から配置するボックスの左端までの長さ bottom：基準位置の下辺から配置するボックスの下端までの長さ right： 基準位置の右辺から配置するボックスの右端までの長さ上記の値は 数値＋単位( px , em など) 又は ％ で指定します。
パーセントは 親ボックスの高さ・幅に対する割合となります。
サンプル
top:5px; left:5px;
bottom:10px; right:10px;
bottom:100%; left:25%;
ロリポップ！のドメインは選べる全８５種類！！
さくらのレンタルサーバ スタンダード
トグルスイッチ（０と１、trueとfalseを切り替え）条件分岐
スタイルシート クラス名の取得、付け替え
要素のID名を動的に換えてスタイルを変更
サーバーカウボーイ
