positionプロパティについて
CSSのpositonプロパティについて解説する。
CSSのpositionプロパティは要素の配置方法を指定する為のもの。
| プロパティ | 値 | 説明 |
|---|---|---|
| positon | static | デフォルトの値。CSSの設定を戻したい時に使用する |
| positon | relative | 親要素から相対的に配置する |
| positon | absolute | 親要素から絶対位置で配置する。通常はtop, right, bottom, left のプロパティも同時に使う |
| positon | fixed | 固定して表示する。スクロールしても固定された位置で表示し続ける |
| positon | sticky | スクロールに合わせて追従して表示する |
position: relative について
relativeはリレイティブと読みそうだがレライティブが正しいらしい。他にもIT用語はカタカナで読もうとすると間違った発音になる単語も多いので、気が向いたら発音を極める旅に出るのも良いかもしれない。
さて、relativeは相対的な配置をする。例を見せよう
<style>
#oya1 {
width: 100%;
height: 250px;
background: gray;
}
.ko1 {
width: 100px;
height: 100px;
background: white;
margin-top: 20px;
position: relative;
top: 20px;
left: 20px;
}
</style>
<body>
<div id="oya1">
<div class="ko1"></div>
<div class="ko1"></div>
</div>
</body>
灰色のoya1の中にあるko1の座標を確認してほしい。この表現は正しいか分からないがoya1はデフォルトで左上の座標の位置を持っている。大事なのは左上って事だ。その左上からko1がtopとleftのプロパティを持っているが、これは指定した座標からどれだけ移動するかを表す。どちらも20pxなので上と左に20pxだけ移動して100pxの白いボックスを描画している。
top, right, bottom, left のプロパティを使う際はpositionがstatic以外の指定が必要だ。
ko1を2つ描画しているが着目するのは配置だ。2つは重なっていない。
margin-topで余白を作って見やすくしているが、これを取ると余白なく表示される。relativeは重ならない仕様になっているのだ。ただし、topやleftを指定して無理矢理重ねる表示にする事は可能だ。
position: absolute について
今度はrelativeで示したコードをpositionだけ修正し、absoluteに変えてみる。
<style>
#oya1 {
width: 100%;
height: 250px;
background: gray;
}
.ko1 {
width: 100px;
height: 100px;
background: white;
margin-top: 20px;
position: absolute;
top: 20px;
left: 20px;
}
</style>
<body>
<div id="oya1">
<div class="ko1"></div>
<div class="ko1"></div>
</div>
</body>
結果はボックスが一つしか表示されていない！ これはko1が重なって一つに見えている為だ。実際は2つあるが、重なっているだけ！ absoluteは親の要素の左上から見た絶対的な位置で配置する。
position: fixed について
これは何かを固定して表示させる配置方法だ。ページをスクロールしても固定して表示する。例えばこのサイトの上に「LEARNING MENU」と表示しているが、このメニューがページをスクロールしても固定して付いてくるな。fixedを使っているからだ。
position: sticky について
ある領域限定でfixedの動きをする。例えばPCで僕のサイトを表示すると右に僕の簡易プロフィールを表示しているが、スクロールすると追従して付いてくるだろう。しかし、ずっと同じ位置ではなく、その領域内限定で追従する事が確認できるだろう。これはstickyを使っている。