position 【要素の配置方法】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

positionプロパティは、要素の配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。positionプロパティで指定するのは、配置方法だけです。 表示位置を実際に指定するには下記のプロパティを併用します。また、要素を入れ子にする場合には重なる順序『z-index』の指定が必要になります。

上からの距離:topプロパティ
右からの距離:rightプロパティ
下からの距離:bottomプロパティ
左からの距離:leftプロパティ
重なる順序:z-indexプロパティ

static
特に配置方法を指定しません。この値を指定した場合には、top、bottom、left、rightは適用されません。これが初期値です。

relative
相対位置に配置する際の指定となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。

absolute
絶対位置への配置となります。divでボックスを入れ子にする際など、親要素にpositionプロパティのstatic以外の値が指定されている場合、親要素の左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。現在サポートしているブラウザが限られていますので、要確認です。

positionの使用例

CSSファイル

.sample001 {
 position: relative;
 width: 300px;
 height: 300px;
 background-color: #ffcccc;
 margin: 10px;
}
.sample002 {
 position: absolute;
 top: 50px;
 left: 50px;
 width: 100px;
 height: 100px;
 background-color: #ccccff;
}

HTMLソース

<div class="sample001">
positionプロパティ:親要素にrelative
<div class="sample002">absolute<br />top: 50px;<br />left: 50px;</div>
</div>

表示すると

positionプロパティ:親要素にrelative
absolute
top: 50px;
left: 50px;

表示・配置関連項目

overflow(x y) はみ出た内容の表示方法を指定する 
position 要素の配置方法を指定する 
top 上からの配置位置(距離)を指定する 
right 右からの配置位置(距離)を指定する 
bottom 下からの配置位置(距離)を指定する 
left 左からの配置位置(距離)を指定する 
display 要素の形式(ブロック・インライン)を指定する 
float 左寄せ、右寄せ配置の指定 
clear 回り込み(float)を解除する 
z-index 重なりの順序を指定する 
visibility ボックスの表示・非表示を指定する 
clip ボックスを切り抜き表示(クリッピング)する 
direction 文字表記の方向(左右)を指定する 
unicode-bidi Unicodeの文字表記の方向を上書きする 
writing-mode 文字表記の方向(縦横)を指定する(IE独自) 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img