13121001 何かと便利なcssプロパティ「position」。基本さえ分かれば非常に簡単なので是非ノンデザイナーの方もチェックしてみてください!

まずはpositionのプロパティ値の種類です。

static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。

relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。

absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

続いて読み方もおさらいしておきましょう!
ざっと調べてみた感じですと、

static→スタティック
relative→リレイティブ・レラティブ
absolute→アブソリュート・アブソルート
fixed→フィックスト・フィクスト・フィクスド

等など、色々あるようです。
cssの読み方については、この3つのプロパティに限らず様々な呼び方があるので会話する上では相手に合わせて使うと良いかもしれませんね。
明らかに勘違いな読み方をしていた場合はコッソリ教えちゃいましょう( -ノェ-)コッソリ
ボクも経験あります…。

さて今回は最も使われているであろう組み合わせ、
position:relativeとposition:absoluteの使い方を簡単にまとめます。
難しい言葉ばかりで挫折しそうですが、実際触ってみると意外と簡単です!
では見て行きましょう。

position指定なし

Abox
Bbox
Cbox

wrapというdivの中にa,b,cのdivで作られたボックスが並んでいます。
Htmlとcssは下記の通り。
<div class="wrap">
	<div class="a-box box">Abox</div>
	<div class="b-box box">Bbox</div>
	<div class="c-box box">Cbox</div>
</div>

.wrap {
    background-color: #F5F5C8;
    border: 1px solid #CCCCCC;
    height: 200px;
    position: relative;
    width: 300px;
}
.box {
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 50px;
    color: #333333;
}
.a-box {
    background-color: #9bdaeb;
}
.b-box {
    background-color: #f6cd33;
}
.c-box {
    background-color: #795932;
}


c-boxにpositionを指定

13121002
cのボックスをaの右側に移動させます。
c-positionのclassを追加。
<div class="wrap">
	<div class="a-box box">Abox</div>
	<div class="b-box box">Bbox</div>
	<div class="c-box box c-position">Cbox</div>
</div>

c-positionにはposition: absolute;を追加。
そしてtop: 0;とleft: 50px;を指定。
.wrap {
    background-color: #F5F5C8;
    border: 1px solid #CCCCCC;
    height: 200px;
    position: relative;
    width: 300px;
}
.box {
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 50px;
    color: #333333;
}
.a-box {
    background-color: #9bdaeb;
}
.b-box {
    background-color: #f6cd33;
}
.c-box {
    background-color: #795932;
}
.c-position {
    position: absolute;
    top: 0;
    left: 50px;
}

13121003
13121004
bのボックスの上にcのボックスがレイヤーの様に上から覆いかぶさりましたね!
positionを使えば要素の上に要素を被せることも可能になるのでデザインの幅が広がります。
13121005

以上、簡単なposition: relative;とposition: absolute;のまとめでした。
これに絡めてz-indexやfloatなど複数の要因で上手く表示されない場合もあるかと思います。その辺りはまた別の記事で書かせて頂きます|彡 サッ

この記事を書いた人

きどっち
きどっち
webデザイン担当。
起きてる時間はPCかスマホの画面を見ています。
ゲームも色々やってます。

でも視力は抜群です(^ν^)