| position:fixed |
← 固定位置を示す |
| top:距離 |
← 上からの距離 |
| bottom:距離 |
← 下からの距離 |
| left:距離 |
← 左からの距離 |
| right:距離 |
← 右からの距離 |
距離:
「position:fixed」プロパティと、距離をあらわすプロパティを組み合わせて絶対的な位置に固定表示させます。(スクロールしても位置は変わりません)
距離をあらわすプロパティは、top,bottom,left,rightプロパティがあります。
これらは親要素のボックスを基準にした絶対位置に表示されるため、通常の配置とは別扱いとなります。
しかし、このプロパティはInternet Explorerでは正しく表示されないようです。
このプロパティは文字や画像を重ねて表示させたいときなどには便利ですが、サイトに訪れる人の解像度を考慮していないページ作りをしてしまうと大変見づらいページになってしまいます。
単位つきの数値
単位をつけた数値を使って親要素を基準にした位置を指定します。
単位の詳しいことは、『
単位の指定方法』を御覧ください。
・ { position:fixed; top:1em; left:5em; }
・ { position:fixed; bottom:10px; right:50px; }
%
%を使って親要素を基準にした位置を指定します。
・ { position:fixed; top:10% left:30%; }
・ { position:fixed; bottom:10% right:30%; }
別窓にサンプルを表示します(単位つきの数値で指定した場合)
<STYLE type="text/css">
<!--
DIV {
background-color:#ffffff;
border-color:#3399ff;
border-style:dotted;
border-width:1px;
width:200px;
height:100px;
padding:0.5em;
}
.case1 {
position:fixed; top:100px;
left:250px; }
-->
</STYLE>
<DIV class="case1">上から100px<BR>左から250px<BR>を指定しています。
</DIV>
<P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></P>