ボックスを配置する場合に上からの距離を指定するtopプロパティ
top

 topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示し、positionプロパティが「static」以外のときに有効となるプロパティです。

 プロパティ値の単位に「px」「%」「auto」を指定できます。

基本データ

構文 セレクタ{top: 値;}
継承 ×
絶対的なサイズをpx(ピクセル)を使って指定する場合
○○px
相対的なサイズを%(パーセント)を使って指定する場合
○○%
自動的に値を設定する場合
auto
親から継承させる場合
inherit
効果 positionプロパティが設定されたボックス要素の上端からの距離を指定
初期値 auto
適用個所 positionプロパティが設定された要素

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

ほげほげですね。

div { position: absolute; top : 30px; }

動作Webブラウザ

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

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

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

jQueryを使った参照方法

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

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




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

注目のテーマ

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

本日 月間