2010年5月19日水曜日

周囲に影響を与えずに表示場所を移動させる方法。position - CSSカスタマイズ

要素を移動させる
移動したい要素に、position を指定します。 top や leftで位置を決めます。

例:マイページの左上にある「ページの名前」だけを移動させる場合
--------
div.contents h2.title_name {
position : relative;
top : 40px;
left : -70px;
}
--------

o レイアウト固定で無い場合、position : relative; と position : absolute; のどちらかを使います。
o しかしながら、どちらも「HTML上の並び方との組み合わせ」によっては予想外の動きをするブラウザーがありました。出来る事なら、複数のブラウザーで表示結果を確認する事をおすすめします。
# ご参考:HTMLクイックリファレンスの「posision」 ▽http://www.htmq.com/style/position.shtml
#


==
関連ページ:
    ▼要素を移動させる
    ▼CSSカスタマイズ
    ▼制作メモ
    > CSSで表示の並びを入れ替える。positionと margin
    表示を他の要素に重ね合わせる。marginのマイナス指定
    デザインの邪魔になる要素への対応方法