arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[CSS]「なんとなく」から「確実」に ~position編

コードを書いていて「これをこうしたい」と人様のコードをなぞって思い通りにうまくいってしまうと「なぜこれはこういう動きになるのだろう?」と考察することを忘れてしまいがちです(私もやらかします)。今回書くことになるCSSのプロパティであるpositionはdisplayと共にレイアウトでは重要なものなので、この際完璧にしておきましょう。

positionに指定できる値は?

以下が指定できる値です。

static デフォルト。通常の位置に配置
relative 通常の位置を基準として、相対位置への配置
absolute static以外の値が指定された親要素を基準とした絶対位置
fixed ウインドウを基準とした絶対位置

親要素がstaticの場合にabsoluteを指定するとfixedと同じ動きになりますので、「absoluteを使って位置を決めるなら親要素にrelativeを指定する」を確実に覚えておきましょう。

一緒に使うプロパティも覚えておきましょう

positionと一緒に使うプロパティが以下です。

top: ○○px; 基準点の上から○○px下に移動(%でもOK、マイナス値も可能)
right:○○px; 基準点の右から○○px左に移動
bottom:○○px; 基準点の下から○○px上に移動
left:○○px; 基準点の左から○○px右に移動
z-index: ◇; 要素の重なり順。数字が大きいほど上に表示、マイナス値も可能

基準点は親要素あるいは画面の左上端を指します。
ちなみに、position: staticのときにはtop・bottom・left・rightは適用されません。

次は実際に動かしてみます。

position:relative;の場合

まず基本サンプルを見てみます。

See the Pen rerative_default by necomacustom (@tamayura) on CodePen.27739


基本サンプルから緑の四角形を右斜め下に動かしてみます。

See the Pen relative_topleft by necomacustom (@tamayura) on CodePen.27739

子要素の.sample_relativeクラスにtop: 50px;left: 50px;を追加しました。
例えばこんなことも可能です。

See the Pen relative_rightbtm by necomacustom (@tamayura) on CodePen.27739

基準となる位置、この場合はデフォルトの位置の右から左に25px、下から上へ25px移動しました。何度も使う局面はありませんが、要素を突き抜けることがpositionなら簡単にできます。

position:absolute;の場合

ここが今回一番のポイントです。

親要素がrelative+子要素がabsoluteでセットが鉄板

ここだけ覚えて帰ってくださいというところですね(笑)。
親要素にposition: relative;、子要素にposition: absolute;top: 50px;left: 50px;を追加します。

See the Pen absolute_default by necomacustom (@tamayura) on CodePen.27739

次は緑の四角形を黒い背景の右下から左上へ動かしてみます。

See the Pen absolute_rightbtm by necomacustom (@tamayura) on CodePen.27739

right: 25px;bottom: 50px;を追加しました。
relativeの時と同じように突き抜けることも可能です。

See the Pen absolute_rightbtm2 by necomacustom (@tamayura) on CodePen.27739

floatでも見た目は同じようにできますが、最近ではflexboxの普及でfloat自体使わなくなってきています。

position: fixed;も基準点がウィンドウなだけで、absoluteと使い方は同じです。


シンプルイズベスト!というくらい、動きに絞って書いてみました。多く使うのは親要素がrelative+子要素がabsoluteのセットです。
年初に風邪をひいたり、バタバタしていたりとスタートにつまづいてしまいましたが、何とか今年一発目を書くことができました。
遅くなりましたが、本年はさらに多く書くつもりでいます。どうぞよろしくお願い致します。

Share

Leave a comment

PAGE TOP