はじめに

「position はすぐにバグるので使わないようにしています」
本書は、デザイナーから言われたそんな一言をきっかけに生まれました。
position はきっとそんなにバグりません。怖くありません。

対象読者

• CSS がそこそこ書ける Web デザイナー
• CSS にちょっぴり自信がない Web コーダー

想定していない読者

• 3 度の飯より CSS の仕様書が好きな CSS 上級者/ position:sticky; を極めたい方
• HTML や CSS のことを何も知らない Web 初心者

本書の目的

本書は CSS の position プロパティを理解する手助けになることを目的として生まれました。

CSS がそれなりに使えるという方でも、本格的なデザインをコーディングするのでなければあまり使う機会がない position。

安易に使うとすぐに表示がおかしなことになるため、苦手意識を持つ方も少なくありません。

できたと思っていても、忘れたころに修正・調整を加えようとすると牙をむいてくる position は、仲良くなれるまでは「使いたくない」と感じることもあるでしょう。

しかし、とりわけ装飾的な要素の実装に関して頼もしいパートナーになるのが position です。

本書で position と仲良くなり、安心して素敵なコーディングライフを楽しみましょう。

もっと CSS のことを好きになれますように!

2019 年 3 月 柏木みらる

第1章
position って何?

position とはそもそもどんなもので、
どんなときに便利な CSS なのか

1.1 position とは

position は、要素^※の位置を決める CSS のプロパティです。

スタイルシートリファレンスのサイトでは下記のように説明されています。

※要素とは HTML の < 開始タグ> から までのまとまりのこと。

position プロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置か を指定する際に使用します。

position プロパティで指定するのは、配置方法(基準位置)のみです。実際の表示位置の指定には、top、bottom、left、right を併用して、基準位置からの距離を設定する必要があります。

position-スタイルシートリファレンス http://www.htmq.com/style/position.shtml

この説明でバッチリ理解できる、という方には本書は不要でしょう。

次のページからもう少し詳しく position の特徴を説明していきます。

※新しい position の値「sticky」については本書では割愛します。

1.2 position の使いどころ

もしあなたが普段から CSS を書いていたら

「position を使わなくても、ページのレイアウトを作るのには困らないけど......」

なんて思うかもしれません。

たしかにページの全体的なレイアウトは float や flex、grid などで組むのがおススメです。

position は、ほかのスタイルでは実現が難しい少し変わった配置を実現するのに便利です。

詳しい使い方は第2章・第3章で説明しますが、本章では position でどのようなことができるかを例示します。

画面がスクロールしても常に要素が見えるようにする

position: fixed;

position に fixed を指定すると、スクロールしても常に画面上の同じ位置に見えるように要素を配置できます。

たとえば、スクロールしてもページ上部に固定でついてくるヘッダーや、ページ下部に固定でついてくるボタンなどを実装するときに使います。

要素の位置を動かす

position: relative;

position を relative に指定すると、もともとの要素の位置からどれくらい動かすかを指定できます。

position: absolute;

position を absolute に指定すると、ページの端から(または基準位置から)どれくらいの位置に配置するかを指定できます。

要素の上に要素を重ねる

.box {
  position: relative;
}

.box .item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

position の特性を上手く生かすことで、要素の上に要素を重ねて配置することができます。

たとえば、画像の上にアイコンやテキストを重ねて表示するときに使います。