Positioning - 配置
position
ボックス要素の基準位置
unknown
positionプロパティは、ボックス要素(p要素やdiv要素など)の基準位置を指定します。 生成内容を除く、すべての要素に指定可能です。
positionプロパティで指定した基準位置からのどの方向にどれくらいずらした場所に配置するかは、オフセットプロパティ(top、right、bottom、left)を使用して指定します。 オフセットプロパティには負の値も指定可能です。
positionプロパティのデフォルト値は、staticです。
オフセットプロパティのデフォルト値は、すべてautoです。
オフセットプロパティは、positionプロパティの値がstaticの場合は使用できません。
値 | 位置指定 | 説明 |
---|---|---|
static | - | 指定なし(デフォルト値)。 top、left で指定した値は無視される。 |
absolute | 絶対 | 親要素または画面の左上端が基準となる親要素にテキスト部分が含まれていても無視され、左上端からの絶対位置となる。 |
relative | 相対 | 親要素または画面の左上端からした方向・右方向に何ピクセルの位置に表示するかを指定。親要素にテキスト部分が含まれている場合は、テキスト部分の終わりからの相対位置となる。 |
fixed | 絶対 | abosoluteとほぼ同じだが、常に画面の上端からの絶対位置になるというのが異なります。画面の左上端からした方向・右方向に何ピクセルの位置に表示するかを指定。親要素にテキスト部分が含まれている場合は無視され、画面左上端からの絶対位置となる。 |
inhrit | - | 親要素のスタイルを継承する。 ※positionプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。 |
値 | 説明 |
---|---|
top | 基準位置(左上)から上下方向(負の値、正の値)へどのくらいずらした位置に表示するかを指定。 |
left | 基準位置(左)から左右方向(負の値、正の値)へどのくらいずらした位置に表示するかを指定。 |
bottom | 基準位置(右下)から上下方向(正または負の値)へどのくらいずらした位置に表示するかを指定。 |
right | 基準位置(右)から左右方向(正または負の値)へどのくらいずらした位置に表示するかを指定。 |
static
<style type="text/css"> div.parent_static { position:static; top:100px; left:100px; background-color:silver; margin:0; padding:5px; width:430px; } div.chiled_static { position:static; top:1000px; left:100px; background-color:yellow; margin:0; padding:5px; width:430px; } </style> <div class="parent_static"> 【親要素】position:static を指定しています。 <div class="chiled_static"> 【子要素】position:static を指定しています。<br> static を指定すると、top、left、bottom、right で指定した値は無視されます。 </div> </div>
static を指定すると、top、left、bottom、right で指定した値は無視されます。
absolute
<style type="text/css"> div.parent { position:absolute; bottom:10px; right:10px; background-color:silver; margin:0; padding:5px; width:430px; } div.chiled { position:absolute; top:100px; left:-100px; background-color:yellow; margin:0; padding:5px; width:430px; } </style> <div class="parent"> 【親要素】position:absolute を指定しています。<br> right、bottom プロパティで位置指定しています。 <div class="chiled"> 【子要素】position:absolute を指定しています。<br> 親要素にテキスト部分が含まれていても無視されます。 この例では、top、left プロパティで位置指定しているので、常に親要素の左上端が基準位置となります。 </div> </div> <script type="text/javascript"> for(var i=0; i<50; i++){ document.write("LINE "+ i + "<br \/>\n"); } </script>
relative
<style type="text/css"> div.parent_relative { top:5px; left:50px; position:relative; background-color:silver; margin:0; padding:5px; width:430px; } div.chiled_relative { position:relative; top:10px; left:-30px; background-color:yellow; margin:0; padding:5px; width:430px; } </style> <div class="parent_relative"> 【親要素】position:relative を指定しています。 <div class="chiled_relative"> 【子要素】position:relative を指定しています。<br> top、left プロパティで位置指定しているため、親要素の左上端が基準位置となります。<br> この例では、親要素の左上端から<br> ・下方向に10px(top:10px)、<br> ・左方向に30px(left:-30px)<br> ずらした位置に配置されます。<br> ※この例のように親要素にテキスト部分がある場合は、テキスト部分の終わりが基準位置となります。 </div> </div>
top、left プロパティで位置指定しているため、親要素の左上端が基準位置となります。
この例では、親要素の左上端から
・下方向に10px(top:10px)、
・左方向に30px(left:-30px)
ずらした位置に配置されます。
※この例のように親要素にテキスト部分がある場合は、テキスト部分の終わりが基準位置となります。
fixed
<style type="text/css"> div.parent { position:fixed; bottom:0; right:100px; background-color:silver; margin:0; padding:5px; width:430px; } div.chiled { position:fixed; top:100px; left:10px; background-color:yellow; margin:0; padding:5px; width:430px; } </style> <div class="parent"> 【親要素】position:fixed を指定しています。 bottom、right プロパティで位置指定しています。 <div class="chiled"> 【子要素】position:fixed を指定しています。<br> 入れ子にしても親要素からの絶対位置ではありません! top、left プロパティで位置指定しているので、この例では常に画面左上端が基準位置となります。<br> ※absolute と異なり、fixed を指定した場合は、スクロールしても要素は常に画面左上端に固定表示されます。 </div> </div> <script type="text/javascript"> for(var i=0; i<30; i++) { document.write("LINE "+ i + "<br \/>\n"); } </script>
top
上からの位置
unknown
topプロパティは、positionプロパティ(Strictは除く)で指定した基準位置(左上)から上下方向(負の値、正の値)へどのくらいずらした位置に表示するかを指定します。 上辺から下方向へずらす場合は正の値、上辺から上方向へずらす場合は負の値を指定します。 デフォルト値は、autoです。
値 | 説明 |
---|---|
auto | 自動調整(デフォルト値) |
<長さ> | em、pxなど。 ※負の値指定可。 |
<%> | 親ボックス(100%)に対する%指定。 ※負の値指定可。 |
inhrit | 親要素のスタイルを継承する。 ※marker-offsetプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。 |
<style type="text/css"> div.grid { position:relative; width:200px; height:200px; margin:0; padding:0; background:#fff url(/content/img/css/grid.gif) repeat top left; } div.grid div.pos_top { position:absolute; top:20px; /* 親ボックスの上辺から下方向へ20pxの位置 */ width:100px; height:100px; } </style> <div class="grid"> <div class="pos_top"><img src="/content/img/100x100.gif" alt="100x100" width="100" height="100" /></div> </div>

bottom
下からの位置
unknown
bottomプロパティは、positionプロパティ(Strictは除く)で指定した基準位置(右下)から上下方向(正または負の値)へどのくらいずらした位置に表示するかを指定します。 下辺から上方向へずらす場合は正の値、下辺から下方向へずらす場合は負の値を指定します。 デフォルト値は、autoです。
値 | 説明 |
---|---|
auto | 自動調整(デフォルト値) |
<長さ> | em、pxなど。 ※負の値指定可。 |
<%> | 親ボックス(100%)に対する%指定。 ※負の値指定可。 |
inhrit | 親要素のスタイルを継承する。 ※marker-offsetプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。 |
<style type="text/css"> div.grid { position:relative; width:200px; height:200px; margin:0; padding:0; background:#fff url(/content/img/css/grid.gif) repeat top left; } div.grid div.pos_bottom { position:absolute; bottom:20px; /* 親ボックスの下辺から上方向に20pxの位置 */ width:100px; height:100px; } </style> <div class="grid"> <div class="pos_bottom"><img src="/content/img/100x100.gif" alt="100x100" width="100" height="100" /></div> </div>

left
左からの位置
unknown
leftプロパティは、positionプロパティ(Strictは除く)で指定した基準位置(左)から左右方向(負の値、正の値)へどのくらいずらした位置に表示するかを指定します。 左辺から右方向へずらす場合は正の値、左辺から左方向へずらす場合は負の値を指定します。 デフォルト値は、autoです。
値 | 説明 |
---|---|
auto | 自動調整(デフォルト値) |
<長さ> | em、pxなど。 |
<%> | 親ボックス(100%)に対する%指定。 |
inhrit | 親要素のスタイルを継承する。 ※marker-offsetプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。 |
<style type="text/css"> div.grid { position:relative; width:200px; height:200px; margin:0; padding:0; background:#fff url(/content/img/css/grid.gif) repeat top left; } div.grid div.pos_left { position:absolute; left:20px; /* 親ボックスの上辺から左方向に50pxの位置 */ width:100px; height:100px; } </style> <div class="grid"> <div class="pos_left"><img src="/content/img/100x100.gif" alt="100x100" width="100" height="100" /></div> </div>

right
右からの位置
unknown
rightプロパティは、positionプロパティ(Strictは除く)で指定した基準位置(右)から左右方向(正または負の値)へどのくらいずらした位置に表示するかを指定します。 右辺から左方向へずらす場合は正の値、右辺から左方向へずらす場合は負の値を指定します。 デフォルト値は、autoです。
値 | 説明 |
---|---|
auto | 自動調整(デフォルト値) |
<長さ> | em、pxなど。 |
<%> | 親ボックス(100%)に対する%指定。 |
inhrit | 親要素のスタイルを継承する。 ※marker-offsetプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。 |
<style type="text/css"> div.grid { position:relative; width:200px; height:200px; margin:0; padding:0; background:#fff url(/content/img/css/grid.gif) repeat top left; } div.grid div.pos_right { position:absolute; right:20px; /* 親ボックスの右辺から左方向へ20pxの位置 */ width:100px; height:100px; } </style> <div class="grid"> <div class="pos_right"><img src="/content/img/100x100.gif" alt="100x100" width="100" height="100" /></div> </div>

z-index
ク要素の重なりの順序
unknown
z-indexプロパティは、ボックス要素の重なりの順序(スタックレベル)を指定します。 positionプロパティで位置決めされたブロックレベル要素にのみ指定可能です。 数値が大きいほど前面に表示されます。 デフォルト値は、autoです。
値 | 説明 |
---|---|
auto | 自動調整(デフォルト値)。 |
<整数値> | 単位なしの整数値。 |
inhrit | 親要素のスタイルを継承する。 ※z-indexプロパティは子要素に継承されません。親要素の値を子要素に継承する場合はinheritを指定してください。 |
<div style="position:relative; color:#fff;"> <div style="position:relative; width:80px; height:80px; z-index:1; background-color:#7bc6bc; top:20px; left:10px;">z-index:1</div> <div style="position:relative; width:80px; height:80px; z-index:2; background-color:#6e6446; top:-20px; left:30px;">z-index:2</div> <div style="position:relative; width:80px; height:80px; z-index:3; background-color:#006766; top:-60px; left:50px;">z-index:3</div> </div>