WEB制作テクニック

表示する場所を常に固定する
position:fixedを使い、位置を指定するだけです。
※FLASHを固定したい場合はdivタグで囲みます。

positionとは配置方法を指定したい場合に使うものです。
　　　absolute・・・無理やり位置を固定します。画像と文章、画像同士を重ねたりできます。
　　　relative・・・相対的な位置に配置します。別の画像などがあった場合ずれてくれます。
　　　static・・・配置方法を指定しない通常の配置で表示します。
　　　fixed・・・スクロールしても位置が完全に固定されます


以下はソースです。灰色の部分が説明です。
ヘッダー内に記述し、位置固定したい要素にidをつけてください。 
<style type="text/css">
/*#（id）を使っていますが、.(class)でもOKです。*/
#fix1{
  position:fixed;
  top:0px;
  left:0px;
  background-color:#009966;
}
#fix2{
  position:fixed;
  right:0px;
  bottom:0px;
  background-color:#3399ff;
}
/*面倒なのでPタグで四画を作ります。imgタグにidを作ってもＯＫです*/
p{
  margin:0px;
  width:100px;
  height:100px;
  color:#FFFFFF;
}
</style>
サンプル
緑が左上、青が右下に固定されます。ウィンドウを縮小してみてください。
sample内のHTMLは以下のようになっています。
<p id="fix1"></p>
<p id="fix2"></p>



上へ