ほんっとにはじめてのHTML5とCSS3：【22-3】要素を固定位置に指定する position: fixed

【22-3】要素を固定位置に指定する position: fixed

最終更新日：2017年11月16日　（初回投稿日：2017年08月15日）

今回は position: fixed を使ってみます。
前々回は、positionプロパティ全体の「値」と、デフォルト値の position: static、 position: relative を使ってみました。そして前回は、position: absolute を使ってみましたね。
今回の position: fixed もよく利用する便利な指定です。

本日のINDEX

positionプロパティ は、記事を4つに分けました。

【22-1】位置指定の positionと top, right, bottom, leftプロパティ: positionプロパティの値と、top, right, bottom, leftプロパティの値の紹介。positionプロパティのうち static, relative を使います。
【22-2】要素を絶対位置に指定する position: absolute: position: absolute を使う時のコツと、コレを使った要素の装飾をいくつか。
【22-3】要素を固定位置に指定する position: fixed　←今日はココ: position: fixed の特徴や使用例、<header> を固定位置にした時のページ内リンクのズレの解消など。
【22-4】スクロールしていくとピタッと固定する position: sticky: position: sticky はスクロールしていくと必要なところで要素がピタッと止まります。

参考：
こちら↓はドラフト。
CSS Positioned Layout Module Level 3 -- W3C Working Draft, 17 May 2016
勧告済みの CSS2 はこちら↓
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work -- 9 Visual formatting model

position: fixed は「画面」に対しての固定位置

position: fixed は、固定位置指定と言われます。
fixed（フィックスト）とは「固定的な」といった意味。

この指定をされた要素は position: absolute と同じように、他の要素との位置関係から切り離され、スペースも詰められ、他の要素とお互いに位置的な影響を受けなくなります。

ちなみに、W3Cの仕様書で Absolutely positioned elements（絶対位置指定された要素）という呼び方（カテゴライズ的な）があるんですが、これにはこの position: fixed を指定された要素も含まれます。
他のCSSプロパティを使う条件で「絶対位置指定された要素に適用」ということがあるので一応書いておきます（めったに無いけど。clipプロパティだけかも？）

絶対位置指定された要素（Absolutely positioned elements）とは、
position: absolute を指定された要素か、position: fixed を指定された要素です。両方とも、他の要素との位置関係から切り離されるからでしょうね。

position: absolute との違いは、
位置決めの基準になるものが要素ではなく画面（ビューポート）なこと。

position: absolute だと、特に親要素の指定をしなければ、基準は <body>でしたね。
position: fixed は <body> のもっと外側（って言うのかな？）。<body> にマージン指定とかしてたら、そのマージンも含めた画面（ビューポート）全体が親になるんです。

画面（ビューポート）は、具体的には、
★PCサイトなら、ブラウザのウィンドウ
★スマホやタブレットなら ディスプレイ内の表示部分

★そして <iframe>要素を使って表示したら<iframe>の表示部分もビューポートになります。
（これは次の項でサンプルを紹介します↓）

<iframe>要素に関しては、こちらをご覧ください ↓
[63] インライン・フレームで他のHTMLファイルを組み込もう <iframe>

で、そのビューポートの上辺、右辺、下辺、左辺を基準に top, right, bottom, leftプロパティで指定した位置に固定表示されるので、画面をスクロールしても動かなくなります。

<iframe> による position: fixed のサンプル

<iframe> によるサンプルを作ってみました。

下の枠が <iframe>要素でできています。（この枠内が position: fixed の位置基準になります）
左側の「FIXED」と書かれたボックスに position: fixed を指定しています。
スクロールしてみてください。ビューポート（<iframe> の範囲）に対して固定表示されています。

上の iframe 部分のHTML

<iframe src="http://ex.com/sample/fixed_ifrm.html" width="100%" height="220px"></iframe>

iframe 内に表示したHTMLファイルのソースです（CSSはhead部分に書いてます）。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  
  <style>
html,body,div,span,p{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline}
body {
	background:#fbfff5;
    color:#666;
    font:14px/1.6 Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif}
#container {
    width:650px;
    padding-left:130px}
#container p {
    margin:2em 1em 2em 0}
#container p.height500 {height:500px}
#fixed {
    position:fixed;
    bottom:55px;
    left:20px;
    background:#c69;
    color:white;
    font-weight:bold;
    width:90px;
    height:90px;
    line-height:90px;
    border-radius:50%;
    text-align:center}
  </style>
  
  </head>
  <body>
    <div id="container">
      <p>左側の「FIXED」と書かれたボックスは....</p>
      <p>このサンプルは &lt;iframe&gt;要素で...</p>
      <p class="height500">フレーム内をスクロールすると、...</p>
    <div id="fixed">FIXED</div> 
    </div>
  </body>
</html>

固定位置にした要素の botttom: 55px は（26行目）、HTMLファイルの「bottom」でなく、<iframe>の領域での「bottom」の位置になっているのがわかります。

スクロールしても固定させたいモノに position: fixed

以降は、position: fixed の使用例です。
ページをスクロールしても、画面の固定位置にいて欲しいブロックに使用します。

ページのトップへ戻るボタンに position: fixedに

よく使うのが、「ページのトップへ戻るボタン」の表示です。
画面の端っこに固定表示しておくと、上のほうに戻りたいときに便利だから。

本サイトも、PCページだけですが、position:fixed を使って右下に固定表示しています。

HTML

<div id="sidefloat">
  <div id="gototop"><a href="#container" title="ページの最上部へ"></a></div>
  <div id="gotobtm"><a href="#footer" title="ページの最下部へ"></a></div>
</div>

CSS

#sidefloat {
	height: 100px;
	width: 110px;
	position:fixed;
	right:0;
	bottom:50px}
#sidefloat #gototop a,
#sidefloat #gotobtm a {
	height:50px;
	width:110px;
	display:block;
    opacity:.65}
#sidefloat #gototop a {background: url(image/sidebtn_a.gif) no-repeat 0px 0px}
#sidefloat #gotobtm a {background: url(image/sidebtn_a.gif) no-repeat 0px -50px}
#sidefloat #gototop a:hover,
#sidefloat #gotobtm a:hover {opacity:1}

こちら↓は「＊Web Design 覚え書き＊」の ページのトップへ戻るボタン。これも position:fixed を使っています。

これは jQuery を使って、少しスクロールするとふわっと現れるボタンです。ページの一番上を表示していたらボタンは見えなくなります。
作り方をざっとこちら↓に書いていますので、ご興味あったらご覧ください。
スクロールしたらフェイドインで表示される「TOPへ戻る」ボタンをjQueryで | ＊Web Design 覚え書き＊

<header> や <footer> の固定に position: fixed

この他よく使うのは、ページレイアウトで <header> や <footer> を固定にするときなどですかね。

これはサンプルを作ってみたのでご覧ください。
（画像クリックで別ウィンドウで開きます）

このサンプルページの CSSの一部です。（HTML や、CSSの全体はサンプルでご覧ください）

header, footer {
    width:100%;
    position:fixed;
    background:rgba(0,0,0,.5);
    color:#fff;
    z-index:11}
header {
    top:0;
    padding:10px}
footer {
    bottom:0;
    padding:3px}

<header> も <footer> も、幅は左右いっぱい（width:100%　2行目）にしていますので、left や rightプロパティの指定はしてません。
（この場合は、<html>要素・<body>要素に「margin:0; padding:0」の指定を忘れずに）
<header> は「top:0」だけ、<footer> は「bottom:0」だけ指定しています（8、11行目）

「z-index:1」という指定もしています（6行目）
これは本来なら無くていいんだけど、このサンプルページに使っている「Prism」が、pre要素の中身を装飾表示し、スタックコンテキストが1つ上がるため。<header> や <footer>がそれより上になるように「z-index:1」と指定しています。
z-indexプロパティについては、近いうち詳しくやります。

<header> を固定位置にした時のページ内リンクのズレを解消する

サンプル内でテストしていますが、
<header> を固定位置にした時、必ず起こる問題がページ内リンクのズレです。

ページ内リンクは画面の上辺にリンクさせた箇所が来るので、そこに固定位置指定した要素があると重なってしまうんです。まあ当たり前っちゃ当たり前なんですけどね。

これを解消するのによく使われているのが「<header>の高さ分を足した「ネガティブマージン + padding」の組み合わせ」です。
固定した <header>の高さを、リンク先にあらかじめ加えておくんです。

例えば、固定した <header>の高さが 100px、リンク先の要素の上マージンが 20px だったとします。（2emとかでやってたらピクセル換算して）
合計の 120px を、
margin-top: -120px;（←ネガティブマージン）
padding-top: 120px;
とリンク先の要素に指定します。
padding のおかげで、固定位置指定の要素の下に隠れずに済み、ネガティブマージンのおかげでプラスマイナスゼロになるというわけです。

リンク先要素に padding-top がもともと指定してあったら、その分も足します。
padding-top が 30px だったなら、上の例に加算して、
margin-top: -120px;（←ネガティブマージン）
padding-top: 150px;
とします。

次回予告

position: fixed も知っておくと便利ですね。
ページのレイアウトでけっこう活躍することが多いと思います。

さて次回は、positionプロパティの値の最後です。
position: sticky を使ってみましょう。
これはまだドラフトなんだけど、けっこうオモシロイ表示ができるのでサンプルを作ってみます。

その次の記事で、今日も出てきた「z-indexプロパティ」をじっくりやろうと思います。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。