ボックスのレイアウト方法を指定するpositionプロパティ
position

 positionプロパティは、ボックスを画面上にどういった方法でレイアウトしていくかを設定するプロパティです。

 プロパティの値としては、絶対配置の「absolute」、相対配置の「relative」、特に配置方法を指定しない初期値である「static」、スクロールしても位置が固定される「fixed」があります。

 topやleft、right、bottomといったプロパティと一緒に用いられることが多く、画面への配置方法を設定します。

基本データ

構文 セレクタ{position: プロパティの値;}
継承 ×
「absolute」「relative」「static」「fixed」
 
親から継承させる場合
inherit
効果 ボックスのレイアウト方法を指定
初期値 static
適用個所 すべての要素

例:ページの左上の@ITのロゴを見てください。赤文字の文章が重なっています

ほげほげですね。

p { position: absolute; top: 20px; left: 10px; }

動作Webブラウザ

Internet Explorer IE 4以上
Firefox 全バージョン
Safari全バージョン
OperaOpera 6以上
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.position

jQueryを使った参照方法

$('【セレクタ】').css('position','【値】');
$('【セレクタ】').css({'position':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間