今回のCSS

座標位置で自由に配置したい

.testClass
{
  // 配置方法指定CSS
  position:static;   // 初期値
  position:absolute;
  position:relative;
  position:fixed;

  // 位置指定CSS
  top:XXpx;    // 上から何ピクセルの位置
  bottom:XXpx; // 下から何ピクセルの位置
  left:XXpx;   // 左から何ピクセルの位置
  right:XXpx;  // 右から何ピクセルの位置

}

基本的に、positionで配置方法を指定して、位置指定で座標位置を指定し、表示場所を変えます。

static

これは初期値となります。
配置方法も何もしないという形です。
位置指定CSSは効きません。

absolute

絶対位置への配置と呼ばれています。
親要素に、position:static 以外が設定されている場合は
その親要素の左上が基準となります。
また、親要素にstaticが指定されている場合は
そのページの一番左上が基準となります。
位置指定CSSは有効です。

relative

相対位置への配置と呼ばれています。
配置された場所が基準となります。
つまり、普通にコーディングして表示される場所、の意味です。
位置指定CSSは有効です。

fixed

絶対位置への配置となります。
absoluteと違うのは、スクロールしてもその位置に固定される事です。
位置指定CSSは有効です。

基本的な使い方

１：親要素が「relative」子要素が「absolute」
２：「fixed」単独仕様
が良く使われており、「relative」や「absolute」はほぼ単独で使われず
「static」に至っては使用されるケースも少ないです。

デモ的な

以下は全て単独で記述しています

このページを開いてチラチラ気になったと思います。
fixedはなんか良くある場所に出てる気がしますが、absoluteに関しては完全に不自然な所に出ています。
きちんとrelative+abusoluteを使うと以下のようになります。

もう一つ、positionを使うと、そこに要素が表示されていても
縦横のサイズが認識されません。つまり、上に重なっている状態となります。
上記例は、親要素にwidthとheightを指定しているから綺麗に見えています。 実際に親要素のwidthとheightを切ると以下のようになります。

おかわりいただけるだろうか
ぐぇへっへっへ。要素が邪魔してここは
見れない領域だぜーヒャッハー
まぁ、落ち着きたまへ
ゆっくり何をここに仕込んでやろうか考えるのだ。
(´・ω・｀)
何もなかった。
お腹すいてきた。
すごくお寿司が食べたいの
いや、焼肉でもいいぞ！


といった感じで、親要素は伸びず、次の要素に被ってしまう事になるんですね。
そんな事もあるので、レイアウトするにあたり、多用しないほうがよいと思います。
使うとすれば、画像の上にボタンやらテキストを配置したい時とかに使ったりもします。
(画像自体を背景にしてposition使わない方法もありますが)
jQueryのアニメーションとかでぐにゃぐにゃ動かす時は便利なので良く使います。

ちなみに、fixedを邪魔するマンとかふざけたヤツが右側にいますね。
fixedが常に上になるようにしたい場合は
fixedにしている要素に、デベロッパーツールで、z-index:1 (1以上)を指定してあげてみてください。
fixedを邪魔するマンを邪魔するfixedになります。(←何いってだこいつ)
z-indexってこんな感じなんだ！(*^◯^*)と直感的に分かるかもしれないです。

位置指定CSSを簡単に

全ての値を使いたかったので、上記のようにしていますが
topとleftだけで指定しても何ら問題はありません。
ちなみに、僕は「右から数えたほうが早くね？」的な考えなので、都度切り替えています。

【ちょっと余談】
また、jQueryのアニメーションで動かす場合は特に厳密に指定します。
上記例内、要素Aと要素Bをそれぞれ中央に50px動かしたいとかいった場合
top,leftのみで指定していた場合は
要素Aは加算
要素Bは減算
としなければならず、ちょっとめんどくさいです。

で、上記の指定のままだと
両方とも加算で済むのでなんだかスムーズやと思います。

個人差があるかもしれないですね。これは

練習問題的な