またpositionとセットでtop、right、bottom、leftのプロパティを使用して位置を指定します。
値：absolute(絶対位置、起点は画面左上)、relative(相対位置)、fixed(固定)、static(そのまま：デフォルト)、inherit(親要素継承)
positionに関してはこのブログでも使っているのでPCから閲覧の方は参照してください。
例：
一番上のメニューは本来タイトルの下に位置していますが、(styleオフにしてみてください。)
position:absolute;
top:4em;
でタイトルより上に持って来ています。
また全てのアンカー(リンク)のマウスオン時(a:hover)には
position:relative;
top:2px;
left:2px;
でマウスオンで右下に2pxずつズレるようにしています。
このボックスは本当は水色のボックスより上に記述しています。
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
top:100px; /*上から100px下に*/
表示させて、
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
top:100px; /*上から100px下に*/
表示させて、
更にこちらのボックスには
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
bottom:100px; /*下から100px上に*/
を指定する事により双方を入れ替えて表示しています。
※auとimB1.0は赤が上、水色が下に表示されています。
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
bottom:100px; /*下から100px上に*/
を指定する事により双方を入れ替えて表示しています。
