入門8:【CSS/position】をすぐに理解したい人向け徹底解説

入門8:【CSS/position】をすぐに理解したい人向け徹底解説 CSS入門
CANIT先生
CANIT先生

前回は「【入門7:CSS/margin】マージンの基本と応用を徹底マスターしよう」でマージンの基本と応用を見てきました。今回はマージン同様に重要なpositionを見ていきます。

猫田さん
猫田さん

positionというと……なんかの位置を指定するプロパティってことかな?

牛山くん
牛山くん

多分そうですね。僕も位置に関するCSSだと思います

CSSのpositionは要素を配置するときの基準を設定するプロパティです。positionプロパティだけを使っても位置指定はできませんが、他のCSSプロパティを組み合わせることによって表示位置の調整ができます。

positionを使いこなすことができれば、画面内の好きな位置に要素を表示できます。今回はpositionの基本のほか、プロパティを組み合わせて表示位置を指定する方法についても解説します。

positionの基本

positionの基本
CANIT先生
CANIT先生

CSSのpositionは、要素を表示するときの基準を指定するプロパティです。たとえば、サイトのヘッダメニューを上部に固定表示したり、右下に”TOPへ戻るボタン”を固定表示したりと、さまざまなデザインができますよ

猫田さん
猫田さん

ほうほう。 なかなかいいじゃないか

positionの記述ルールと種類

positionプロパティの値は5種類あり、それぞれ以下のように記述します。

.youso1 { position : static; }
.youso2 { position : relative; }
.youso3 { position : absolute; }
.youso4 { position : fixed; }
.youso5 { position : sticky; }

①:static

staticは通常配置です。positionがstaticに設定されているときは表示位置の指定ができません。

②:relative

relativeは要素を相対的に配置したいときに使います。

③:absolute

absoluteは要素を絶対位置で指定できます。親要素からの距離を数値で指定します。

④:fixed

fixedは画面の左上を基準として絶対位置を指定できます。メニューを固定表示するときなどに使います。

⑤:sticky

stickyもメニューの固定表示などに使います。stickyはスクロールに応じて要素の配置条件が変わります。

positionを使った位置指定

CANIT先生
CANIT先生

では、positionプロパティを使った位置指定の仕方を説明しますね

positionプロパティを使うときは、top、right、bottom、leftという4つのプロパティを併用します。positionプロパティで表示方式を決定し、topなどの4つのプロパティによって位置を決定します。

位置指定のプロパティは以下のように記述します。

.youso1 {
    position : absolute;
    top : 70px;
    left : 80px;
}

この例では上から70ピクセル、左から80ピクセルの位置に要素が表示されます。もう1つ別の例を見てみましょう。

.youso2 {
    position : fixed;
    bottom : 0;
    right : 0;
}

この例では下から0ピクセル、右から0ピクセルの位置に要素が表示されます。fixedを指定しているため、画面の右下に固定表示されます。

CANIT先生
CANIT先生

ここまでがpositionプロパティの基本です。positionプロパティには絶対位置や相対位置などの複雑な動きがあるので、それぞれをさらに詳しく解説しますね

positionの詳しい使い方

positionの詳しい使い方

①:staticの配置を詳しく知る

CANIT先生
CANIT先生

staticを指定した要素は通常表示されます。位置指定は出来ません。HTMLで記載した順番通りの位置に表示されます

要素のposition初期値はstaticに設定されているため、positionを設定しなければ自動的にstaticでの配置です。

staticは初期値なので、わざわざposition:staticを指定する機会は多くありません。staticを使うのは、position:absoluteなどが設定された要素のスタイルを上書きする場合です

②:relativeの配置を詳しく知る

CANIT先生
CANIT先生

relativeは要素を相対的に配置します。その要素をstaticで表示したときの位置が基準になります。まずは例を見てみましょう。

HTMLタグ

<div class=”oya”>
    <span class=”ko1”>サンプルです★</span>
    <span class=”ko2”>relativeです☆</span>
</div>

CSS

.ko2 { position : relative; top : 7px; left : 7px;}

この例では2つ目の子要素に対してrelativeを指定しています。relativeを理解するためには、一度relativeを指定しなかったときのことを考えます。

relativeを指定しなければpositionは初期値であるstaticになりますよね。画面では以下のように表示されるはずです。

サンプルです★relativeです☆

spanタグがインライン要素なので改行せずに続けて表示されます。このとき表示されている位置が、relativeを設定したときの基準になります。

つまり、relativeを指定すると★マークの位置から下方向に7ピクセル、右方向に7ピクセル移動した位置に「relativeです☆」が表示されます

③:absoluteの配置を詳しく知る

CANIT先生
CANIT先生

absoluteは要素を絶対位置で表示します。親要素がないときや親要素がstaticのときは、ウィンドウの左上が基準です

HTMLタグ

<div>
    <div class=”ko”>absoluteです☆</div>
</div>

CSS

.ko { position : absolute; top : 7px; left : 7px; }

この例では、ウィンドウの左上を基準として、下方向に7ピクセル、右方向に7ピクセルの位置に「absoluteです☆」が表示されます

absoluteの表示にはもう1つ別のパターンがあります。親要素にstatic以外のpositionが指定されているときは、親要素の左上が基準となります。例を見てみましょう。

HTMLタグ

<div class=”oya”>
    <div class=”ko”>absoluteです☆</div>
</div>

CSS

.oya { position : relative; }
.ko { position : absolute; top : 7px; left : 7px; }

親要素にrelativeを指定しているので、親要素の左上から7ピクセルの位置に「absoluteです☆」が表示されます

absoluteを使うときのポイント
absoluteを使うときのポイントは親要素へのrelative指定を忘れないことです。
absoluteを使うときはrelativeをセットで使うことを覚えておきましょう。

親要素にrelativeの指定がない場合、表示基準がなくなってしまい、レイアウトが崩れてしまいます。

④:fixedの配置を詳しく知る

CANIT先生
CANIT先生

fixedは要素を絶対位置で表示します。ウィンドウ左上が基準となり、スクロールしても表示位置が固定されたままになります。例を見てみましょう

HTMLタグ

<div>
    <div>文章1</div>
</div>
<div>
    <div>文章2</div>
<div class=”ko”>fixedです☆</div>
</div>

CSS

.ko { position : fixed; top : 7px; left : 7px; }

この例では要素にfixedを指定しています。文章1や文章2の配置とは関係なく、必ずウィンドウの上から7ピクセル、左から7ピクセルの位置に「fixedです☆」が表示されます

fixedでの重なり対策

fixedは要素を絶対位置で表示するため、複数のfixedを持った要素が重なってしまうことがあります。

通常のHTML要素であれば、HTMLを書いた順番に並べられます。それぞれの要素が高さの値を持っていて、要素同士が重なることはありません。しかし、position:fixedを指定した要素は、フロート状態(浮いている状態)となり、HTMLの順番を無視して表示されます

このときの重なり順を指定するのがz-indexというプロパティです。初期値はz-index:0に指定されています。z-indexの数値を大きくすると優先的に表示され、数値を小さくすると優先度が下がります。数値には正の数または負の数を指定できます。

⑤:stickyの配置を詳しく知る

CANIT先生
CANIT先生

stickyはpositionプロパティの中でも複雑な挙動をする値です。画面がスクロールされるとfixedのように振る舞い、スクロールされていないときはrelativeのように振る舞います

StickyContainerとStickyItem

stickyを理解するためにはStickyContainerとStickyItemの関係について知っておく必要があります

要素にposition:stickyを指定すると、その要素がStickyItemになります。そして、StickyItemを含む親要素が自動的にStickyContainerになります。

StickyItemはStickyContainerの中でフロート状態になります。StickyContainerが表示されているときに画面をスクロールすると、StickyItemは指定位置に留まり続けます。スクロールを続けてStickyContainerが表示されなくなるとStickyItemも非表示になります。

CANIT先生
CANIT先生

わかりにくい部分なので、実際のコードを見てみましょうか

stickyのコード例

HTMLタグ

<body>
    <div>
        <h2>見出し</h2>
        <p>文章A</p>
        </div>
    <div class="oya">
        <div class=”ko”>stickyです☆</div>
        <p>文章B</p>
        </div>
    <div>
        <p>文章C</p>
    </div>
</body>

CSS

p { height : 700px; background-color : #F8F8F8; }
.ko { position : sticky; top : 0; background-color : #F9BB2B; }

この例を実際に動かしてみるとstickyの挙動がわかります。見出しや文章Aが表示されているときは「stickyです☆」が表示されません。スクロールしてoya要素が見えたとき「stickyです☆」が表示されます。

oya要素が終わるまでの間はスクロールしても「stickyです☆」が表示され続けます。oya要素のtop:0の位置に張り付いています。

さらにスクロールしてoya要素が画面外になると「stickyです☆」も表示されなくなります。このように、親要素が見えている間だけposition:fixedのように固定表示されるのがstickyの仕様です

stickyの使用例

stickyはしばしばヘッダメニューの固定に使われます。ヘッダメニューを固定するときは先ほどのコード例とは違った形になりますので、ヘッダメニュー固定の例も紹介しておきます。

HTMLタグ

<body>
    <div class=”zentai_box”>
        <div class=”menu”>ヘッダメニュー</div>
        <h2>見出し</h2>
        <p>コンテンツ</p>
    </div>
</body>

CSS

.menu { position : sticky; top : 0; }

ヘッダメニューを固定するときはサイトコンテンツを1つのボックスで囲みます。その直後にヘッダメニューを配置し、position:stickyを設定します。

親要素が表示されている間、スクロールでついてくるのがstickyの挙動でしたね。この例ではコンテンツの最初から最後までが親要素に囲われているため、常にヘッダメニューが画面上部に留まります。

コンテンツを親要素で囲むと、position:fixedと同じ感覚でstickyを使うことが可能です。

また、top:0の部分をbottom:0に変えると画面下に留まるメニューが作れます。stickyを使えばフッタメニューやサイドメニューなど、あらゆる固定表示に対応できます。

stickyが動かないときの対処法

CANIT先生
CANIT先生

子供要素にstickyを指定したのに上手く動作しないことがあります

原因として考えられるのは、sticky要素が親要素の中で唯一のアイテムであることです。

以下のように、親要素とposition:stickyの要素だけで構成されているとstickyは動作しません

<div class="oya">
    <div class=”ko”>stickyです☆</div>
</div>

stickyはあくまでも親要素の中でのフロート状態です。親要素のエリアサイズと子要素のエリアサイズが同じであるため、フロートする範囲がないとみなされます。

stickyが動かないときは親要素エリアサイズと子要素エリアサイズが同じになっていないかを確認してみましょう

猫田さん
猫田さん

これは実際に書いて表示例を見てみないとわからなさそうだねー

牛山くん
牛山くん

そうですね。 僕も復習をかねて実際に書いてみます

CANIT先生
CANIT先生

そうですね。CSSは実際に書いて身につくのでぜひ実践してみてください

CSSの学習:positionまとめ

まとめ
CANIT先生
CANIT先生

今回はCSSのpositionプロパティの使い方についてみていきました

牛山くん
牛山くん

今回も頑張りましたね

猫田さん
猫田さん

また、賢くなったー

positionには複雑な仕様もありますが、理解できるととても便利なプロパティです。positionが上手く動かないときは、absoluteとrelativeをセットで使うなどの基本的なルールを見直しましょう。

また、position:stickyはCSSバージョン3で新しく追加された値です。ブラウザによって対応が異なる場合もあるので、stickyを使うときはブラウザ対応の状況もチェックしてみてください。

猫田さん
猫田さん

よーし、次いってみよー

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました