CSS positionを使ってみよう！

おはこんばんちわ、文章書くのまぢ難しいと嘆くやのっぱです(´・ω・｀)

さて、よくpositionがよくわからなぃ。。。ﾖﾖﾖ

という声を聞くので、今日はpositionってなんぞや？というお話です。

position=ポジション
その名の通り、位置を調整します。

プロパティはこんな感じ

relative	相対位置
absolute	絶対位置
fixed	固定位置
static	通常位置

合わせて使うプロパティ

top	基準の上辺を基準に移動
right	基準の右辺を基準に移動
bottom	基準の下辺を基準に移動
left	基準の左辺を基準に移動
z-index	重ね順を指定

と並べましたが、相対位置？絶対？なにそれ美味しいの？(´・ω・｀)
ってなりますね。

こまかく説明すると余計わからなくなると思ったので、かむく。。噛み砕いて説明するよ！
上の表はちょっと忘れましょう。

relative レラティブ

元居たところから、位置を移動するよ！
だけど、relativeで位置を調整することはほとんどないです。
absoluteの基準にしたいボックスに与えるだけ！って決めて使ったほうが安全！！
IEバグで空白いっぱい！とかになっちゃうこともあるから注意！

absolute アブソリュート

relative,absolute,fixedが与えられた親要素を基準に位置を移動できるよ！
親要素にpositionプロパティがなかったらbodyが基準になるので注意！！
動かしたい要素にabsoluteを与えたとたん、あれ？どこいった？ってなったら、親要素にプロパティが与えられているかも確認しましょう！

fixed　フィックスト

ウィンドウを基準に位置を指定できるよ！
よく見るずっと右下に居るページトップボタンはこれですね！
ウィンドウの下を基準に50px上(bottom:50px;)、右を基準に左へ50px(right:50px;)ってすると
右下にずっといることになります。
IE6は対応してないから注意です！

static　スタティック

position使うのやめるよ！
通常の状態に戻す役割です！
一応説明したけど、使うことあまりないです。

あとはtopやleftで位置を調整したり、重ね順を調整するのがpositionってプロパティです。

といってもよくわからない、なのでデモを用意してみました！
実際にやってみましょう！

relativeが動くとabsoluteも動きましたね！
relativeの中にあるabsoluteの基準は親のrelativeになっているんです。

relativeのない状態でabsoluteを置くとbodyが基準となりますので、注意です。
基本relativeで位置を調整するのではなく、親要素にrelativeを与えて、動かしたい子要素にabsoluteを与えるのが基本になると思います。

次に、z-indexですが、adobe製品を触ったことのある方ならレイヤーの順番といえばわかりやすいかと思います。
relativeやabsoluteの重なり順になりますね。

これもわかりにくいと思いますので、またデモを作ってみました。

なんとなく雰囲気はつかめましたでしょうか？
0を基準に重なり順を変えることができます。
指定しなかった場合は、HTMLを書いた順になります。
HTMLは上から読んでいくので後に書いたほうが重なりは上になりますね。

注意すべきはrelativeが基準ということです。
入力すると重なり…のテキストはrelativeボックスの子要素ではないので、relativeボックスを高くすると文字が隠れます。
色々と入力してみて雰囲気を掴んでください！

最後にfixedです
フィクスト(ド)はウィンドウを基準に固定されます。
使ったことのない人からするとなんのこっちゃ抹茶に紅茶ですね。
よくheaderがずっとウィンドウ上部に居たり、サイドコンテンツがスクロールしてもずっと居るのがフィクストです。

気をつける点は、ウィンドウが基準ということ！
右にページヘ戻るボタンを配置した場合、ウィンドウ幅が狭くなっていくとコンテンツに被ってきたりします。
よく考えて使用しないといけませんね！

デモは作りませんでしたが、Page Topボタンがfixedです。

でわこのへんで、よいコーディングライフを！(・ω<)ﾉｼ