位置指定で使うCSS「position」プロパティの使い方

ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。
 

下記のようによく右下に固定で配置されているボタンなど見かけるんですがあれはどうすれば良いんでしょうか？？

「お申し込みボタン」とかでよく見かけますね！あれはCSSのpositionプロパティで位置を指定＆固定して実現できます。ここでは位置指定に関するCSSプロパティ「position」について説明していきますね。

位置に関するスタイル position

基準位置を設定してから、要素をpxや%で配置する方法として「position」というスタイルがあります。

positionで配置方法を指定しつつ、位置指定のプロパティ「top(上)、bottom(下)、left(左)、right(右)」と合わせて要素の位置を指定することができます。
 

■positionを利用した位置指定のサンプル

 

positionプロパティには主に以下の4つの設定があります。

項目	意味
position:static;	「position: static」は初期値です。通常の位置に配置されます（要素の順番に左上から配置されます)。 後述のtop,bottomなどで位置を指定することができません。 何も指定しない時はposition:staticになっているので明示的に指定するケースは少ないです。
position:relative;	「position:relative」を設定すると、もともと配置されるはずの場所を基準にtop,leftなどの位置指定ができるようになります。 position:relativeは相対位置と言います。
position:absolute;	「position:absolute」を指定すると通常の配置から外れてブラウザ(body)が基準位置になります。 親要素にposition:static以外の値を設定している場合は親要素の左上が基準位置になります。
position:fixed;	position:fixedを指定するとabsoluteと同様に、通常の配置から外れて親要素を基準点とした位置に強制的に配置されます。前述のabsoluteとの違いは、スクロールしても位置が固定されたままという点です。

具体的な位置の指定「top bottom left right」

positionによる位置指定とともに、具体的な位置(距離)指定に「top(上)、bottom(下)、left(左)、right(右)」を利用します。
 

これらはposition:static以外の値が指定されているときに有効です。単位は%またはpxです。
 
 

potisionを利用した位置指定のサンプル

通常位置 position:staticのサンプル

「position: static」は初期値で、通常の位置に配置されます（HTML要素の順番に左上から配置されます）。top,bottomなどで位置を指定をすることができません。
 

■例　position:static（なにもしない初期状態）

 

■上記のソースコード

何も指定しない時はposition:staticになっているので、明示的に指定するケースは少ないと思います。
 
 

相対位置 position:relativeのサンプル

position:relative;を指定すると、後述のtop,bottom,left,rightなどで位置を指定ができるようになり、もともと配置されるはずの場所から位置を調整できます。
 

■例 position:relative;　さらにtop:50px;left:50pxで位置を右下にずらしている。

 

なお、位置調整でできた隙間に、他のコンテンツが自動的に配置されることはありません。
 

補足 親要素にrelativeを指定する

何もしないとstaticと同様に元々の表示される予定の位置に表示されますが、子要素にposition:absoluteを使うために、利用する場合もあります。
 

■親要素にposiion:relativeを指定することで、子要素は親要素を基準に位置指定ができます。

■ソースコード

絶対位置 position:absoluteのサンプル

「position:absolute」を指定すると通常の配置から外れてブラウザ(body)が基準位置になります。
 

■例　position:absolute、bottom:0、right:0で右下に固定

 

■上記のソースコード

親要素にposition:static以外の値を設定している場合は親要素の左上が基準位置になります。
 

■例　 親要素をposition:relative。子要素をposition:absolute。

絶対位置 position:fixedのサンプル

absoluteと同様に、通常の配置から外れて、親要素を基準点とした位置に強制的に配置されます。
 

前述のabsoluteとの違いは、スクロールしても位置が固定されたままという点です。
 

■上記のソースコード

「お申し込みボタン」とかでスクロールいても要素が付いてくるようにするには、本例のように対象要素で、「position:fixed」を指定すれば実現できます。

まとめ

今回は、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。
 

positionを覚えておくことで、細かいレイアウト調整・多彩なレイアウト調整が可能になりますのでぜひ使い方を覚えておきましょう。
 

『自分で作る選択を！』

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

今回は以上になります。最後までご覧いただきありがとうございました。