CSS3

on Note

position 要素の位置を変える、移動させる

ウェブページは、コンテンツや要素はマークアップした順番、つまり書いた順番に上から表示されるのが普通です。後で書いた文章が上に表示されることは基本ありません。

positionプロパティを使えば、要素が表示される位置を変えることができます。positionプロパティを指定した要素は移動する、と言えばわかりやすいでしょうか。

よく使われるのが、画像にテキストを重ねるレイアウトです。マークアップで画像の次にテキストを書いたとすると、画像の次にテキストが表示されます。ここで positionプロパティを使うと、画像にテキストを重ねることができます。

ここでは、positionプロパティの書き方に加え、指定する値によって異なる挙動の違いを説明します。また、positionプロパティでよく使われる手法がありますのでそれも説明します。

要素の位置を決める際の基準

positionプロパティは、要素が表示される位置を変える、言い換えれば要素を移動させるといったスタイルを実現するプロパティです。

要素の移動にあたって、どこに移動させるのかという位置決めが必要になってきます。そこで、どこを基準にして位置を決めるのか、考え方が次の2通りに分かれます。

  • 本来表示される位置を基準にして、相対的に位置を決める。
  • Viewport(ウェブページが表示される領域)を基準にした、絶対的な位置決めをする。

このように positionプロパティでは、移動の基準をどこにするかで値が変わります。では、どこに移動させるのかという移動先の指定はどうするのか。最終的な表示場所となる座標を、topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで、必要に応じて指定します。

ここで相対的にと絶対的、それぞれ移動先の指定の仕方を説明しておきます。

移動先の位置を相対的に指定する

要素の移動先を相対的に考える場合、その要素の元の位置からどれだけずれた位置に移動させるのかを指定します。

その要素のどれか1辺を基準にして、例えば上からどれだけ、左からどれだけというずらす位置を、topプロパティなどを使って指定します。(次の見本画像では、ずらす距離の単位を「px」にしていますが、「em」など他の単位も使えます。)

相対的に位置を決める

例えば相対的に、上から50px、左から100pxの距離に移動させるとした場合のコードは次のようになります。

position: relative;
top: 50px;
left: 100px;

移動先の位置を絶対的に指定する

要素の移動先を絶対的に考える場合、Viewportの端からの距離で指定します。

Viewport(ビューポート)とは、ページの表示領域、つまりブラウザの画面と考えて下さい。ブラウザ画面の端を基準として、上からどれだけ、左からどれだけといった位置決めをします。これが絶対的ということです。

絶対的に位置を決める

例えば絶対的な指定をするとして、ブラウザ画面の上端から50px、左端から100pxの位置に表示させるとした場合、コードは次のようになります。

position: absolute;
top: 50px;
left: 100px;

では改めて positionプロパティの使い方を説明します。

positionプロパティの使い方

書式は「position: 値;」です。positionプロパティの値は、どこを基準にして位置を決めるのか、つまりどのように移動させるのかを示します。

要素の移動にはもう1つ、基準からどれだけの距離で表示させるのかという、最終的な位置の情報も必要になります。最終的な表示場所となる座標を、topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで、必要に応じて指定します。

どのように移動させるのかを positionプロパティで、それに合わせて、どれだけ移動させるのかという最終的な座標を topなど4種類のプロパティから指定します。

positionプロパティで使用できる値とそれぞれの意味は次の通りです。

static
初期値
要素を通常の位置に配置する。
top、right、bottom、leftプロパティを適用しない。
relative
top、right、bottom、leftプロパティを指定した分だけ、現在の位置から相対的に移動させる。
absolute
Viewport(ウェブページが表示される領域)を基準に、top、right、bottom、leftプロパティで指定した座標に絶対的に配置する。
fixed
要素をページ内に絶対的に配置し、画面のスクロールとともに追従する。

positionプロパティを指定した要素は浮いた状態となります(static は除く)。だからこそ、要素を自由に移動させることができるし、要素同士を重ねて表示させることもできるのです。

浮いた状態になるというのは、知っておくべきpositionプロパティの挙動です。

それぞれの値によって要素はどのように動くのか、見本で確認します。

position: relative;の動きの見本

見本では、一番外の青い枠をブラウザの画面と仮定し、内側の赤い枠をテキストの親要素として説明します。

ピンク色の「テキスト」の要素が、見本の下部のボタンを押すと移動します。 position: relative;と同時に top: 50px;と left: 100px;を指定しています。

テキスト

position: relative;は、元の位置から相対的に指定した位置に移動します。元の位置から見て上方向の距離が50px、右方向の距離が100pxずれた位置に移動しました。

実際のHTMLは次の通りです。

<div class="viewport">
    <div class="content">
        <p>テキスト</p>
    </div>
</div>

これに適用したスタイルは次の通りです。

.viewport {
    height: 200px;
    border: solid 2px #00b;
}
.content {
    width: 80%;
    height: 180px;
    border: solid 1px #b00;
    margin: 10px auto;
}
p {
    position: relative;
    top: 50px;
    left: 100px;
    display: inline-block;
    background-color: #fdf;
}

移動させたい p要素に position: relative;を指定し、同時に、相対的な移動先として top: 50px;と left: 100px;を指定しました。

position: absolute;の動きの見本

今回は値を absoluteにしていますので、ブラウザ画面と仮定した青い枠を基準に、絶対的な位置指定をします。ボタンを押すと、青い枠を起点として、上端からの距離が50px、左端からの距離が100pxになる場所に移動します。

テキスト

実際のHTMLは次の通りです。

<div class="viewport">
    <div class="content">
        <p>テキスト</p>
    </div>
</div>

これに適用したスタイルは次の通りです。

.viewport {
    height: 200px;
    border: solid 2px #00b;
}
.content {
    width: 80%;
    height: 180px;
    border: solid 1px #b00;
    margin: 10px auto;
}
p {
    position: absolute;
    top: 50px;
    left: 100px;
    display: inline-block;
    background-color: #fdf;
}

移動させたい p要素に position: absolute;を指定し、同時に、表示位置として top: 50px;(Viewport上端から50px)と left: 100px;(Viewport左端から100px)を指定しました。

position: fixed;の動きの見本

fixedは、absoluteと同様に、ブラウザ画面を基準にした絶対配置となります。ブラウザの端を起点に距離を指定します。

absoluteと挙動が異なる点が、画面のスクロールとともに要素が追従する点です。

ウェブページの、ヘッダ部分の中に設置するナビゲーションメニューによく使われており、画面を下にスクロールさせてもメニューが追従するページはよく見かけます。

fixedを指定する時の注意点

fixedはナビゲーションメニューで使われることが多いと言いました。メニューを画面の上に固定し、スクロールとともに追従するパターンです。

多くのサイトでは、ナビゲーションメニューは画面の横幅いっぱいで設置しているかと思います。ただ、メニューに position: fixed;を指定しただけでは、指定した位置に固定し追従させることはできても、横幅いっぱいにはなりません。コンテンツの分の幅になるだけです。

次の見本は、ボタンを押すとメニューが上端に移動し追従します。しかしコンテンツの分の幅しか確保されません。

  • MENU 1
  • MENU 2
  • MENU 3
  • MENU 4
  • MENU 5

次が実際のHTMLです。

<ul>
        <li>MENU 1</li>
        <li>MENU 2</li>
        <li>MENU 3</li>
        <li>MENU 4</li>
        <li>MENU 5</li>
    </ul>

適用したスタイルは次の通りです。

ul {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background-color: #333;
    color: #fff;
}

position: fixed;によって浮いた要素はコンテンツの分の幅しか持たない、これが fixed の挙動です。ではどうするのか。この要素に幅を持たせたい場合は、同時にwidthプロパティで幅を指定する必要があるのです。

次の見本では、position: fixed;と同時に widthプロパティで要素の横幅を 100%に指定しました。

  • MENU 1
  • MENU 2
  • MENU 3
  • MENU 4
  • MENU 5

ボタンを押すとメニューの帯が画面の左上に移動し、その幅は画面に対して100%になります。

CSSは次のようになります。

ul {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #333;
    color: #fff;
}

position: fixed;の場合は、同時に widthプロパティも指定するべきと覚えておきましょう。

relative と absoluteは同時に使うことが多い

position: absolute;は、ブラウザ画面を基準にして絶対配置するというものでした。そこに topプロパティや rightプロパティなどを使って絶対的に座標を指定します。

ただ、絶対配置で指定はしたいが、ブラウザが基準となると使いづらい、という場合もあると思います。また、要素を重ねて表示させたい場合も、絶対配置の基準が、ブラウザよりも重ねられる側(親要素側)である方が望ましいでしょう。

このように、absoluteの基準がブラウザでなく、親要素にしたい場合、移動させたい要素には position: absolute;を、そしてその親要素に position: relative;を指定します。これで position: absolute;の基準が親要素へと変わるのです。つまり、親要素を基準にしての position: absolute;になります。

このように、親要素に relative、移動対象の要素に absoluteという手法はよく使われます。

座標指定は子要素側で行う

このように親要素に指定した position: relative;は、子要素の配置基準という役割である為、ここでの座標指定は行いません。

子要素側、つまり position: absolute;を指定する側で、親要素に対する座標を指定する形になります。

relative と absolute を同時に使った場合の見本

「テキスト」の要素に position: absolute;を指定したいのですが、それだけでは、ブラウザ画面と仮定している青い枠が基準となります。

今回は、「テキスト」の親要素にあたる赤い枠を基準にしたいので、親要素に position: relative;を指定します。

テキスト

ボタンを押すと、「テキスト」の親要素である赤い枠を基準に、下に50px、右に100pxの場所に移動します。 position: relative;を指定した親要素に対しての絶対配置ということです。

実際のHTMLは次の通りです。

<div class="viewport">
    <div class="content">
        <p>テキスト</p>
    </div>
</div>

これに適用したスタイルは次の通りです。

.viewport {
    height: 200px;
    border: solid 2px #00b;
}
.content {
    position: relative;
    width: 80%;
    height: 180px;
    border: solid 1px #b00;
    margin: 10px auto;
}
p {
    position: absolute;
    top: 50px;
    left: 100px;
    display: inline-block;
    background-color: #fdf;
}

まとめ

positionプロパティを使えば、対象の要素を任意の位置に移動させることができます。

移動先を、どこを基準に考えるのかを positionプロパティで指定し、移動先の座標は topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで指定します。

positionプロパティで使用する値とその意味は次の通りです。

static
初期値
要素を通常の位置に配置する。
top、right、bottom、leftプロパティを適用しない。
relative
top、right、bottom、leftプロパティを指定した分だけ、現在の位置から相対的に移動させる。
absolute
ブラウザ画面を基準に、top、right、bottom、leftプロパティで指定した座標に絶対的に配置する。
fixed
要素をページ内に絶対的に配置し、その要素は画面のスクロールとともに追従する。

ナビゲーションメニューを追従させるにはメニューに position: absolute;を指定するが、同時に、widthプロパティで横幅の確保もすべきです。

position: absolute;は本来、ブラウザ画面を基準にした配置だが、absoluteを指定する要素の、親要素にposition: relative;を指定することで、ブラウザ画面ではなく親要素を基準にすることができます。