この記事では、「位置も重なりも指定できないposition: static; の使い方」について解説します。
position: static; は、positionプロパティの初期値で設定されていて、記述することはほとんどありません。relativeやabsolute、fixedなどと違って使いどころがよく分からないと思われがちですが、staticならではの役割があるので、記事の後半で解説します。
なお、positionプロパティはstaticの他にも下記の4つがあります。
- fixed
- relative
- absolute
- sticky
- position: static; の使い方
目次
位置も重なりも指定できないposition: static; の使い方
positionプロパティは、要素の配置を指定するプロパティです。positionプロパティの初期値はstaticで、通常の位置に配置されます。
基本書式は次のようになります。
基本書式
セレクタ {
position: static;
}position: static; は初期値なので、値を入力しなくても適用されます。staticにはpositionプロパティの他の値、relativeやabsoluteと違ういくつかの特徴があります。
position: static; の特徴1 - 位置を指定できない
通常、positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します。staticの場合は例外で、top, left などのプロパティを適用しても反映されません。
<div class="box relative"></div>
<div class="parent">
<div class="box absolute"></div>
</div>
<div class="box fixed"></div>
<div class="box static"></div>.box {
width: 100px;
height: 100px;
}
.relative {
background: red;
position: relative;
top: 60px;
left: 150px;
}
.parent {
position: relative;
background: lightblue;
width: 200px;
height: 200px;
}
.absolute {
background: lightcyan;
position: absolute;
top: 80px;
left: 80px;
}
.fixed {
position: fixed;
top: 40px;
left: 400px;
background: lightgray;
}
.static {
position: static;
background: orange;
top: 200px;
left: 500px;
}出力結果
See the Pen positon:static;その他 by ZeroPlus (@zeroplus-programming) on CodePen.
position: static; はtop, left などで位置の指定をすることができません。positionプロパティを使って位置を指定する場合はstaticではなく、relativeやabsoluteを使用しましょう。
position: static; の特徴2 - 重なり順を指定できない
position: static; は、要素の重なり順を指定するz-indexは反映されません。
.box {
width: 100px;
height: 100px;
}
.relative {
background: red;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
}
.parent {
position: relative;
background: lightblue;
width: 200px;
height: 200px;
z-index: 1;
}
.absolute {
background: lightcyan;
position: absolute;
top: 150px;
left: 40px;
z-index: 1;
}
.fixed {
position: fixed;
top: 40px;
left: 100px;
background: lightgray;
z-index: 1;
}
.static {
position: static;
background: orange;
z-index: 1000;
}出力結果
See the Pen position:static;とz-index by ZeroPlus (@zeroplus-programming) on CodePen.
z-indexは数字が大きいほど前に表示され、数字が小さいほど後ろに表示されます。上記コードの場合、position: static; にz-index: 1000; のような大きい数字を適用しても、z-indexが効かないので前に表示されません。
position: static; の特徴3 - 要素の高さを保持する
position: static; はrelativeと同様に要素の高さを保持します。それに対してabsoluteやfixedは要素の高さを保持しなくなるので、その他の要素が詰まるようになります。
positionプロパティ適用前は次のようになります。
<div class="container">
<div class="box-area">
<div class="box static">static</div>
<div class="min-box"></div>
</div>
<div class="box-area">
<div class="box relative">relative</div>
<div class="min-box"></div>
</div>
<div class="box-area">
<div class="parent">
<div class="box absolute">absolute</div>
<div class="min-box"></div>
</div>
</div>
<div class="box-area">
<div class="box fixed">fixed</div>
<div class="min-box"></div>
</div>
</div>.container {
display: flex;
}
.box-area {
margin-right: 10px;
}
.box {
width: 100px;
height: 100px;
}
.min-box {
width: 100px;
height: 100px;
background: red;
}
.static {
background: orange;
}
.relative {
background: lightgreen;
}
.absolute {
background: lightpink;
}
.fixed {
background: lightblue;
}出力結果
See the Pen static高さ確認-適用前 by ZeroPlus (@zeroplus-programming) on CodePen.
positionプロパティを適用した場合は次のようになります。
.static {
background: orange;
position: static; /*追記*/
}
.relative {
background: lightgreen;
position: relative; /*追記*/
top: 150px; /*追記*/
}
.absolute {
background: lightpink;
position: absolute; /*追記*/
top: 150px; /*追記*/
}
.fixed {
background: lightblue;
position: fixed; /*追記*/
top: 150px; /*追記*/
}出力結果
See the Pen static高さ確認-適用後 by ZeroPlus (@zeroplus-programming) on CodePen.
イメージとしては次の画像のようになります。
positionの使い方は、実際に手を動かすと体感できます
position: static; の使い道とは - positionプロパティの解除に使う
position: static; の特徴について解説しました。
- 位置を指定できない
- 重なり順を指定できない
- 要素の高さを保持する
このような特徴を持つstatic はどのような場面で使うかというと、positionプロパティを解除する場面です。例えばレスポンシブで、PC時はposition: relative; やposition: absolute; を使い、SP時はposition: static; を使用してabsoluteを解除するなどのパターンが考えられます。
position: static; でpositionプロパティを解除する例
<div class="parent">
<div class="box"></div>
</div>.parent {
position: relative;
width: 400px;
height: 400px;
background: lightblue;
}
.box {
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 200px;
background: orange;
}
@media screen and (max-width: 768px) {
.box {
position: static;
}
}出力結果
See the Pen staticレスポンシブ by ZeroPlus (@zeroplus-programming) on CodePen.
PC時にはboxクラスにposition: absolute; を適用し、タブレットサイズ以下ではposition: static; でabsoluteの指定を上書きして解除しています。検証ツールで確認すると、position: absolute; はstaticによって上書きされているものの、top, left などは上書きされていません。
しかしstatic自体がtop, left などの位置を指定できない値なので、結果的に位置が解除されて初期状態に戻った形となります。
staticはそもそもCSSで記述しなくても初期値で設定される値です。そのためstaticを記述することはほとんどありません。用途としては、position: static; 以外の値（relative, absolute, fixed, sticky）を解除するために使います。
まとめ
position: static;について解説しました。staticは初期値で設定されている値なので、記述することはほとんどありません。positionプロパティの解除に使われるので、状況に応じて使用しましょう。
positionプロパティは、今回解説したstaticの他にも「fixed」「relative」「absolute」「sticky」などがあります。このようにCSSは、プロパティ一つでも覚えることがたくさんあるので、少しずつ学習を進めていきましょう。
position: static; まとめ
- top,left など位置を指定できない
- z-index で重なりを指定できない
- 要素の高さを保持する
- fixed, relative, absolute, sticy などの解除に使われる
一つ、確かな理解を積み上げましたね。
ただ「理解した」と「実務で使える」の間には、もう一段ギャップがあります。なんとなく作れても、実務基準ではコードにムダや間違いがあるとみなされることがあります。自分では気づけない、そのズレをどう埋めるかが次の課題です。
そのギャップを埋める一番早い方法は、実際の案件レベルの制作を、メンターに見てもらいながら進めることです。
ZeroPlus Gateでは、30日間無料で、正しくWebサイトを作る力が身につく実践型の学習環境を提供しています。
- メンターとあなただけの学習ロードマップを作れる
- 現場経験豊富なプロへ回数無制限で質問ができる
- 元ランサーズの技術責任者監修のカリキュラム
このレベルの環境を、入会金も月謝も一切なしで提供しているのはZeroPlus Gateだけです。ただし、参加者の数には制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
登録は30秒、今すぐ次の一歩へ
