配置

position: 〜 ;

• ボックスの配置の基準となる位置を指定する。　[NN4不可]
• 実際の表示位置の指定は　top　/　bottom　/　left　/　right　を使う。

• static
  • デフォルト。
• relative
  • 相対位置配置。
  • 本来あるべき位置が配置基準位置となる。
  • position:relative;top:10px;right:10px;　と指定した場合、それは本来表示されるところから上 10px 右 10px ずれて表示される。
• absolute
  • 絶対位置配置。
  • ウィンドウ全体の左上が基準位置となる。
    （親ボックスが static 以外のときは、親ボックスの左上が基準位置）
• fixed
  • 絶対位置（ウィンドウ全体の左上が基準位置）に固定配置。
    スクロールしても動かない。　[NN6〜のみ対応]

cssソース

.sample1 {background-color:#FFFF33;width:150px;height:50px;}
.sample2 {background-color:#99FFCC;width:150px;height:50px;
           position:●●●;top:-10px;right:10px;}

HTMLソース

<DIV class="sample1">ABCDEF</DIV>
<DIV class="sample2">●●●</DIV>

position:static; か、何も指定していない場合の表示

• top、bottom、left、right　を指定しても適用されず、無視される。

position:relative; を指定した場合

• 本来の位置より上から -10px 右から 10px の位置に表示される。
• z-index: 〜 ; もあわせて指定すると、このように黄色のボックスを上にすることもできる。

position:absolute; を指定した場合

• 上から -10px 右から 10px の位置に表示される。

top: 〜上端からの距離〜 ;
bottom: 〜下端からの距離〜 ;
left: 〜左端からの距離〜 ;
right: 〜右端からの距離〜 ;

• 配置位置（距離）を指定する。
• 数値（単位必須）　/　%　/　auto （自動調整　デフォルト）
• position: 〜 ; で配置の基準となる位置を指定すること。（static 指定は無効）

cssソース

.back {background-color:#FFFF33;}
B {position:relative;color:#993300;}
.top {top:10px;}
.right {right:10px;}
.bottom {bottom:10px;}
.left {left:10px;}

HTMLソース

<SPAN class="back">[<B class="top">top</B>]</SPAN>　　
<SPAN class="back">[<B class="right">right</B>]</SPAN>　　
<SPAN class="back">[<B class="bottom">bottom</B>]</SPAN>　　
<SPAN class="back">[<B class="left">left</B>]</SPAN>

z-index: 〜 ;

• ボックスの重なる順序を指定する。　[NN4不可]
  （普通は後から記述されたものがどんどん上に表示されていく）
• 整数値　　・・・　0 を基準として数値の大きいものほど前面に表示。（負の値も指定可能）
  auto　　・・・　親要素と同じ階層。デフォルト。
• position: 〜 ; で static 以外を指定していることが必要。

cssソース

.sample1 {background-color:#FFFF33;width:150px;height:50px;
           position:relative;z-index:2;}
.sample2 {background-color:#99FFCC;width:150px;height:50px;
           position:relative;top:-10px;right:10px;z-index:1;}

HTMLソース

<DIV class="sample1">ABCDEF</DIV>
<DIV class="sample2">あいうえお</DIV>