2010年5月19日水曜日

CSSで表示の並びを入れ替える方法。positionと margin - CSSカスタマイズ

要素を移動させる
position と margin を併用すると、表示の並びを入れ替える事が出来ます。


**** 綺麗に動かす為のポイント
o 上下に移動させたい時は、「高さが決まっている」要素を移動させるのが、ポイントです。
o 左右に移動させたい時は、「幅が決まっている」要素を移動させるのが、ポイントです。


**** 手順
(1) 移動したい要素に、position を指定します。top や leftで位置を決めます。

(2) それだけだと、他の要素が移動しません。margin を使って、後続の要素をずらします。
例:高さ 100px の要素を上に動かす時
   + 移動先を空けます。移動先にある要素に margin-top : 100px; を加算します。

   + 移動元は、穴埋めをします。2通りの方法があります。
   (a) 移動する要素の次の要素に margin-top : -100px; を加算します。(上に持ち上げる方法です)
   (b) 移動する要素に margin-bottom : -100px; を加算します。(移動する要素の、実質高さを 0にする方法です)


==
関連ページ:
    ▼要素を移動させる
    ▼CSSカスタマイズ
    ▼制作メモ
    > デザインの邪魔になる要素への対応方法
    周囲に影響を与えずに表示場所を移動させる。position
    表示を他の要素に重ね合わせる。marginのマイナス指定