positionプロパティで要素を思い通りの場所に配置する方法とは?

【CSS】positionプロパティで要素を思い通りの場所に配置する方法とは?


CSSのpositionプロパティ、使いこなせているでしょうか?
positionプロパティを使うと、HTML上の並びに関係なく好きな場所に要素を配置することができます。
とても便利なプロパティなのですが、
なかなか思った場所に配置ができない方もいるのではないでしょうか?
思い通りの配置を行うために、positionプロパティの使用方法をしっかりと理解しておきましょう。

positionプロパティで要素を配置する方法

positionプロパティで要素を配置する方法を見ていきましょう。
配置するには以下の2つの情報が必要です。
1. どこを基準にするか?
2. どれだけ動かすか?

 

どこを基準にするか?

まずは、positionプロパティでどこを基準にするかを設定します。
positionプロパティの値はstatic,relative,absolute, fixedの4種類があります。

 

staticはpositionプロパティを指定しない場合の初期値です。
通常のhtmlの配置フロー(上から下、左から右)で配置されていきます。

 

要素を好きな位置に配置するには、relative、absolute、fixedのいずれかを使用します。
これら3つの値の違いは基準となる位置(基準ボックス)です。
それぞれの基準ボックスは以下のようになります。

 

relativeは本来表示される表示領域(positionがstaticの時の位置)
absoluteはpositionがstatic以外の親または先祖要素、なければbody要素
fixedはブラウザの表示領域

 

どれだけ動かすか?

次に、基準ボックスからどれくらい動かすかを指定します。
動かす方向と距離をtop、left、bottom、rightプロパティで指定できます。

 

topは基準ボックスの上辺からの距離
leftは基準ボックスの左辺からの距離
bottomは基準ボックスの底辺からの距離
rightは基準ボックスの右辺からの距離

基準ボックス

基準ボックスの設定

実際にpositionの値を変えながら、基準ボックスの違いを確認してみましょう。

下のようなHTMLとCSSを用意しました。

表示は以下のようになります。

通常の表示

 

html上の並び通りに上から順番にA、B、Cと詰めて表示されています。

それでは、positionプロパティを使って要素の配置を変えてみましょう。

relative

positionをrelativeに設定してみます。

position-relative

relativeは本来の表示ボックス(通常のhtml配置フローで配置される位置)を基準ボックスにします。
relativeは自分自身が基準ボックスになるため、
思い通りの場所に配置するのには適していません。
配置するというよりも、ずらすという感覚で使うほうがわかりやすいでしょう。

 

relativeにはもう1つ重要な役割があります。
次に説明するabsoluteと併用して、子(孫)要素の基準ボックスを設定することです。
relativeはこの使い方が最も多いでしょう。

absolute

positionをabsoluteにします。また親要素(#parent)のpositionをrelativeに指定います。

position-absolute

absoluteが指定された要素の基準ボックスの決まり方には癖があります。

 

1. positionがrelative、absolute、fixedに指定された直近の親または先祖要素
2. 上記に該当する要素が見つからない場合は、body要素

 

今回のソース上では親要素(#parent)に対して、positionをrelativeに指定しています。
absoluteを指定した子要素は、#parentを基準ボックスとした配置になっていることがわかります。

fixed

最後はpositionをfixedにしてみましょう。

position-fixed

fixedはブラウザの表示領域を基準ボックスにして配置されます。
absoluteでbodyを基準にするのとは違い、スクロールしても位置が変わらずに固定表示されます。

 

まとめ

positionプロパティで要素を自在に配置するためには、
基準ボックスがどれなのかを意識することが大切です。

この点をしっかり理解しておけば、
どれだけ動かすかを指定するところは共通なので、難しくありません。

また、理解できたら実際にpositionを用いたサイトを作成して慣れていきましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【こんなことまでできるの!?】Photoshopでスリムな体型に修正しよう!