CSS position: static プロパティ値

CSS position 属性CSS position プロパティ

position: staticはCSS位置指定プロパティのデフォルト値です。

ある要素のposition値が...に設定されるとstatic、その要素はドキュメントの通常のレイアウトフローに従って配置され、影響を受けない top、right、bottom、leftとz-indexなどの位置指定プロパティの影響。

言い換えれば、staticは特別な位置指定を一切行わず、要素は元あるべき場所に配置されます。

単語の意味：staticラテン語から来ていますstaticus、「静止した、動かない」という意味で、要素が元の位置に留まることを表します。

基本構文

position: staticはCSS位置指定プロパティの中で最もシンプルで基本的な値です。

/* 语法 */
position: static;

/* 实际示例 */
.box {
    position: static;
}

プロパティの説明

プロパティ値 説明
static デフォルト値です。要素は通常のドキュメントフローに従って配置され、位置指定プロパティの影響を受けません

関連する位置指定プロパティが static に与える影響

プロパティ static要素への効果
top 無効。位置指定効果は一切発生しません
right 無効。位置指定効果は一切発生しません
bottom 無効。位置指定効果は一切発生しません
left 無効。位置指定効果は一切発生しません
z-index 無効。スタック順序を手動で設定できません

例

例を用いてposition: staticの動作を理解しましょう。

例1: staticはデフォルトの位置指定方法です

明示的に設定しなくても、position: static要素はデフォルトでstatic位置指定になります。比較してみましょう。

例

<!DOCTYPE html>
<html>
<head>
    <style>
/* コンテナのスタイル：背景とパディングを設定して観察しやすくする */
        .container {
            padding: 20px;
            background-color: #f5f5f5;
            border: 2px solid #ddd;
        }

/* 3つのdivブロックはデフォルトでstatic位置指定 */
        .box {
            padding: 15px;
            margin: 10px 0;
            background-color: #3498db;
            color: white;
            border-radius: 4px;
        }

/* 2番目のボックスはtopプロパティでの位置指定を試みる（staticには無効） */
        .box-2 {
position: static; /* 明示的に宣言してもstatic */
top: 100px; /* このプロパティは効果を一切発揮しません */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1番目のボックス (デフォルトのstatic)</div>
        <div class="box box-2">2番目のボックス (明示的なstatic + top:100px)</div>
        <div class="box">3番目のボックス (デフォルトのstatic)</div>
    </div>
</body>
</html>

効果の説明：

2番目のボックスはtop: 100pxによって下に移動しないことがわかります。これはstatic位置指定された要素はtop、right、bottom、leftこれらの位置指定プロパティを完全に無視します。

例2: static要素はz-indexを設定できません

通常のドキュメントフローでは、要素のスタック順序はHTML内での出現順序によって決まります。z-indexこの順序を変更することはできません：

例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
position: relative; /* 親コンテナをrelativeにして基準とする */
            height: 150px;
            background-color: #f0f0f0;
        }

        .box {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

/* 3つのボックスが順に表示される */
        .box-1 {
background-color: #e74c3c; /* 赤色 */
position: static; /* デフォルトの位置指定 */
z-index: 999; /* 無効！ */
        }

        .box-2 {
background-color: #2E7DCC; /* 緑色 */
            position: static;
margin-top: -30px; /* 負のmarginで重なりを発生させる */
            margin-left: 60px;
        }

        .box-3 {
background-color: #9b59b6; /* 紫色 */
            position: static;
            margin-top: -30px;
            margin-left: 120px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box-1">Box 1 (z-index:999)</div>
        <div class="box box-2">Box 2</div>
        <div class="box box-3">Box 3</div>
    </div>
    <p>Box 1 が z-index: 999 を設定していても、static位置指定であるためz-indexは機能しません。</p>
    <p>最終的なスタック順序は変わりません：後から出現した要素が上に表示されます（Box 3が最前面、Box 1が最背面）。</p>
</body>
</html>

使用シーン

はposition: static何もしていないように見えますが、以下のシーンで役立ちます：

シーン1: 位置指定のリセット

以前に設定した位置指定の効果を解除する必要がある場合は、positionに戻すことができます。static：

/* 之前可能是 relative、absolute 或 fixed */
.sidebar {
    position: fixed;
    top: 0;
}

/* 现在需要取消固定定位，恢复正常布局 */
.sidebar {
    position: static;  /* 移除固定定位效果 */
}

シーン2: 位置指定された子要素の基準として

はstaticそれ自体は位置指定しませんが、基準として機能します：位置指定コンテキストの「基準」として機能します：

/* 父元素设置为 relative，虽然它自己可能是 static */
.parent {
    position: relative;  /* 创建新的定位上下文 */
}

/* 子元素 absolute 会相对于这个 parent 定位 */
.child {
    position: absolute;
    top: 10px;
    left: 10px;
}

シーン3: デバッグとテスト

開発中に、要素がなぜ位置指定されたのかわからない場合は、一度staticに戻して問題を調査できます：

.debug-element {
    position: static;  /* 临时设为 static 看原始位置 */
}

注意事項

よくある誤解：多くの初心者がtop: 0、left: 0などのプロパティで要素を左上に「リセット」しようとしますが、これらのプロパティはstatic要素にはまったく効果がありません。このような効果が必要な場合は、relative、absolute 或 fixed位置指定を使用するべきです。

他の位置指定値との比較

位置指定値 ドキュメントフローから外れるか top/right/bottom/left の影響を受けるか z-index をサポートするか
static いいえ、通常のレイアウトを維持 否 否
relative いいえ、ただしオフセット可能 はい、元の位置からオフセット である
absolute はい、ドキュメントフローから外れる はい、最も近い位置指定された祖先要素に対して相対 である
fixed はい、ドキュメントフローから外れる はい、ビューポートに対して相対配置 である
sticky はい、スクロールがしきい値に達すると固定 はい、しきい値の位置を設定 である

まとめ

position: staticはCSS位置指定の基礎であり、その動作を理解することは他の位置指定方法を習得する上で非常に重要です。

以下の重要なポイントを覚えておきましょう：

  • staticであるpositionプロパティのデフォルト値
  • static要素は通常のドキュメントフローに従ってレイアウトされる
  • top、right、bottom、leftプロパティはstatic要素には無効です
  • z-indexプロパティはstatic要素には無効です
  • 位置指定のリセットや位置指定コンテキストの基準としてよく使用されます

CSS position 属性CSS position プロパティ

その他の拡張