• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

CSS positionを使ってみよう!

投稿者アイコン
2014/06/24
書いた人:
yanoppa!
カテゴリ:
CSS   HTML
26,581 views

CSS positionの基本的な使い方を紹介。relative, absolute, fixed, static。 マスターしてCSS初心者を抜け出そう!

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ってプロパティです。

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



入力すると位置が変わります。pxまで打ち込んでね

relative(水色) absolute(緑)


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

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


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

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



サンプルテキストだよ
さんぷるテキストだよ
サンプルてきすとダヨ
サンぷるてきストだよ
relative
(水色)
absolute
(緑)
text

入力すると重なり順が変わります。わかりやすいかと思い、色は半透明にしてます。



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


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



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

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

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

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


この記事を読んだ人はこんな記事も読んでいます