positionプロパティとは
cssのpositionプロパティでは「要素がどのように配置されるか」を設定することができます。
- 指定した位置に要素を配置する
- 要素を重ねて表示する
- 特定の場所にずっと要素を表示させ続ける（固定表示）
などを指定をすることができます。
ポートフォリオサイトでも、背景画像に青いdivを重ねる際や、ブログカードの設定でpositionプロパティを使いましたね。
ブログカードでは写真とラベルを重ねて表示させました。
今回はこのpositionプロパティの復習と、CSSアニメーションと組み合わせた使い方を見ていきましょう。
top、bottom、left、rightについて
positionプロパティで指定するのは、配置方法のみです。 実際に「どの位置に要素を配置するか」を指定するためには、下記４つのプロパティを併用することで基準位置からの距離を設定します。
- top
- bottom
- left
- right
もう一度、ポートフォリオサイトのブログカード部分を見てみましょう。 positionプロパティだけではなく、topなどの位置指定もありますね。
ちなみに、top、bottom、left、rightの初期値はautoです。 上図の例のように、４つ全てを指定しなくても動作します。
z-indexについて
z-indexプロパティは、要素の重なり順序を指定する際に使用します。
photoshopのレイヤー/イラストレーターの“重ね順”のようなイメージです。 基本的には、値の数が大きいほど前面に表示されます。
ただし、すべての要素にz-indexを指定できるわけではありません。
CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
その他に、スタック文脈やスタックレベルとの関係もあるため、一概に「z-indexに大きな値を入れれば最前面に出てくる」と言えるものではありません。 ただし、このあたりの仕組みはサイト制作中に上手く行かなかった時に調べられれば十分です。しっかりと覚える必要はありません。
気になる方は下記サイトや、Googleで「z-index スタック」などと検索して調べてみて下さい。
参考サイト：z-indexの仕組み
positionプロパティの値
positionプロパティの値として使用するのは、下記５つが主です。
- static：初期値 - 特に配置方法を指定せず、通常の位置に配置する。
- relative：相対位置 - 現在の位置を基準に相対的な位置を決める
- absolute：絶対配置 - 親要素を基準に絶対的な位置を決める
- fixed：固定配置 - 画面の特定の位置に固定し表示し続ける
- sticky：粘着位置配置 - スクロールに応じて要素を固定表示にする
それぞれ、下記で詳しくご紹介します。
また、初期値・継承値をセットするinitial、inherit、unset、revertもプロパティ値として使用できます。 各プロパティの詳細については下記リンクよりMDN CSSリファレンスをご確認下さい。
1. static-初期値
staticはpositionプロパティの初期値です。
つまり、自分でcssにpositionプロパティを指定していない要素も、全てposition:static;として扱われているわけです。
このことからも分かるように、position:static;が指定されている要素は通常の位置（文書の通常のフローに従った場所）に配置されます。
positionプロパティの値が「static」のときには、 top, right, bottom, leftやz-indexは効きません。
position:absoluteを指定する場合も、position:staticの要素は基準位置にできません。
2. relative-相対位置
position:relative;は相対位置に配置されます。
top, right, bottom, left の値が指定されている場合は、自分自身からの相対オフセットで配置されます。
簡単に言えば、自分が本来配置されるはずだった位置を“基準位置”として、相対的に配置場所を指定することができる値なのです。
例として、下記のコードで設定してみましょう。
greenクラスはposition:relative;を指定していますが、位置は決めていません。
位置の指定がない場合は、通常の位置（文書の通常のフローに従った場所）に配置されます。例のコードではflexを指定しているので、横並びになりますね。
では、.greenにtopとleftを指定してみましょう。
.green{
position: relative;
top: 50px;
left: 100px;
background-color: green;
}
指定した分だけ、配置されている位置から動きました。
marginやpaddingを使って位置を変更した場合は、次の要素も一緒に動きますよね。
しかし、positionを使って位置を動かした場合は「yellow」の位置はそのままです。
position:relative;は要素を移動させても、通常位置にその要素分のスペースが保持されるという特徴があります。
3. absolute-絶対配置
position:absoluteは親要素がposition:static 以外の場合、親要素の左上を基準位置としてtop, right, bottom, leftで指定された位置に配置されます。 親要素がposition:staticの時は、ブラウザウィンドウの左上が基準位置になります。
relativeの時に使ったコードで、poritionの値をabsoluteに変えてみます。
↓位置を指定しない場合はこのようになります。
↓topとleftに値を指定した場合は、このようになります。
最初の方で登場したポートフォリオサイト（ブログカード）。 ここでは、親要素の.card-bodyに「porition:relative;」を指定することで、.card-bodyを基準位置として.card-category-boxの位置を指定しています。
4. fixed-固定配置
position:fixed;も絶対配置に配置される点はabsoluteと同じですが、 スクロールしても位置が固定されたまま留まることが特徴です。
これは基準位置を好きに設定できるabsoluteに対して、fixedの位置の基準は親要素ではなく「ウィンドウ全体」になるためです。
素材のポートフォリオサイトで使っているナビゲーションが、position:fixed;（固定配置）の代表と言えるでしょう。 スクロールしてもずっと同じ位置に表示されていますよね。
ナビゲーションを固定するために、bootstrapの「fixed-top」というクラスを加えていますよね。 検証ツールで確認してみると、「fixed-top」には下記のようなスタイル指定がなされていることがわかります。
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
}
5. sticky-粘着位置配置
position:stickyを指定している要素は、文書の通常のフローに従って配置されます。 top と組み合わせて指定した場合、ページを下にスクロールして表示領域からはみ出しそうになると、fixedと同じようにページ上部に張り付きます。 botttomと組み合わせて使用した場合はページの下部に張り付きます。
簡単に言ってしまうと、スクロールに応じて要素を固定表示するという設定です。
Bootstrapでも position: sticky を使用した「スクロールした後、要素をviewportの上部に配置する」というsticky-topというクラスが用意されています。
https://getbootstrap.jp/docs/4.5/utilities/position/
blog-single.htmlのサイドバーで最後にあるARCHIVESのセクションに、このsticky-topクラスを加えてみます。
top:0に固定されてしまうと、ナビバーと被るのでCSSで調整します。
.archives.sticky-top{
top: 64px; /* navbarの高さ分 */
}
これで表示してみると、下記のようになります。 記事本文が長いとサイドバー部分が空になってしまうので、こういう設定をされているブログサイトもありますね。
構成を変更すると、スティッキーナビゲーションも作れます。
実習
position:fixed;を使って、画面右下に常駐するボタンを追加してください。 このボタンは、クリックするとページの最上部(ヘッダーナビ と ヒーロー画像)のところまで戻ることが出来るものにします。
今回の実習はHTMLファイルとCSSファイル両方の変更が必要です。 素材ファイル（index.html）での変更箇所は下記になります。
答え合わせ・見本コードは、レッスン素材（position.zip）の中にある「index-position.html」をご確認ください。
※本ページの確認用フォルダに、画像等は含まれていません。