1. position: staticの基本

staticはCSSで設定しなくても初期状態で適用されている位置指定です。HTMLの順番通りに表示され、topやleftなどの座標指定は無視されます。つまり、自然な文章や要素の並びに従って表示されます。


<style>
    .box-static {
        position: static;
        background-color: lightgray;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 10px;
    }
</style>

<div class="box-static">staticのボックス</div>
<p>この文章はボックスの下に自然に表示されます。</p>

ブラウザ表示

2. position: relativeの使い方

relativeは要素を元の位置から相対的に動かすことができます。top、left、bottom、rightの値を使うと、元の位置を基準に移動できます。周りの要素の位置は変わらないため、レイアウトを崩さずに調整可能です。


<style>
    .box-relative {
        position: relative;
        top: 10px;
        left: 20px;
        background-color: lightgreen;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 10px;
    }
</style>

<div class="box-relative">relativeのボックス</div>
<p>この文章はボックスの元の位置の下に表示されます。</p>

ブラウザ表示

3. position: absoluteの基本

absoluteは親要素を基準に要素を配置する方法です。top、left、bottom、rightで自由に位置を指定でき、親要素にposition: relativeが設定されている場合、その親を基準に配置されます。親要素がない場合はbodyを基準にします。


<style>
    .container {
        position: relative;
        width: 300px;
        height: 150px;
        background-color: #f0f8ff;
    }
    .box-absolute {
        position: absolute;
        top: 20px;
        left: 30px;
        width: 100px;
        height: 50px;
        background-color: lightcoral;
        line-height: 50px;
        text-align: center;
    }
</style>

<div class="container">
    <div class="box-absolute">absoluteのボックス</div>
</div>

ブラウザ表示

4. position: fixedの特徴

fixedは画面に対して固定される位置指定です。スクロールしても画面上の同じ位置に表示されます。ヘッダーやフッター、戻るボタンなどを画面に固定したい場合に便利です。


<style>
    .box-fixed {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 120px;
        height: 50px;
        background-color: lightblue;
        text-align: center;
        line-height: 50px;
    }
</style>

<div class="box-fixed">fixedのボックス</div>
<p>スクロールしてもボックスは右上に固定されます。</p>

ブラウザ表示

5. position: stickyの使い方

stickyはスクロールに応じて固定される特殊な位置指定です。要素は通常の位置に表示されますが、スクロールして指定した位置に達すると画面に固定されます。ヘッダーやナビゲーションの一部でよく使われます。


<style>
    .box-sticky {
        position: sticky;
        top: 0;
        background-color: lightyellow;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #ccc;
    }
    .content {
        height: 400px;
        background-color: #f5f5f5;
        margin-bottom: 20px;
    }
</style>

<div class="box-sticky">stickyのボックス</div>
<div class="content">スクロールしてstickyを確認</div>
<div class="content"></div>

ブラウザ表示