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のマイナス指定