CSS3

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

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

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

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

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

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

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

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

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

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

では改めて 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と挙動が異なる点が、画面のスクロールとともに要素が追従する点です。

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

<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;
}

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

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

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

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

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

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

<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;
}