この記事では、「位置も重なりも指定できないposition: static; の使い方」について解説します。
position: static; は、positionプロパティの初期値で設定されていて、記述することはほとんどありません。relativeやabsolute、fixedなどと違って使いどころがよく分からないと思われがちですが、staticならではの役割があるので、記事の後半で解説します。
なお、positionプロパティはstaticの他にも下記の4つがあります。
- fixed
- relative
- absolute
- sticky
- position: static; の使い方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
位置も重なりも指定できない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: 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は、プロパティ一つでも覚えることがたくさんあるので、少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
position: static; まとめ
- top,left など位置を指定できない
- z-index で重なりを指定できない
- 要素の高さを保持する
- fixed, relative, absolute, sticy などの解除に使われる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
