【きまぐれ☆CSS! 第1回】positionプロパティって何

き・ま・ぐ・れ☆Cascading style sheets! です。フレちゃんはあんまり関係ないですごめんなさい。

本当に気まぐれにやります。続くんかこれ。

positionプロパティって何

その名の通りposition(配置)を決めるためのプロパティ。と言ってもこれで「上からこんくらい左からこんくらいの位置に表示しろよな!!!!」ではないです。

これはあくまで「要素の配置方法をどうするか」を設定するものであって、上みたいな位置の指定はまた別のプロパティを用います。

設定値

次の4つ

おおよその意味
static (初期値) 指定しない
relative 相対位置へ配置
absolute 絶対位置へ配置
fixed 絶対位置へ配置の上固定

それぞれ解説していきます。

static

指定しません。親要素や周りの要素のCSSの記述などに沿っていい感じに配置されます(ダメな説明)

縦に積み上げるようにボックスを配置したりする際は多くの場合staticに設定するというか、そもそもpositionを記述しません。staticは英語で”静的な”という意味があります。

relative

相対位置へ配置します。この相対位置がどこからみた相対位置なのかというと、positionにstaticを設定する(あるいはpositionを設定しない)場合に表示される位置が基準になります。

HTMLはpositionをstaticにしたdiv要素の中にrelativeクラスのdiv要素を入れ子にしたものとします。

.relative {
    position:relative;
    top:40px;
    left:20px;
}

relativeを設定した場合、というよりstatic以外の設定値の場合以下のプロパティを用いて位置指定ができるようになります。値の指定はpxなどで行います。

プロパティ 用途
top 上からの位置指定
right 右からの位置指定
bottom 下からの位置指定
left 左からの位置指定

このとき、topとleftの基準位置となるのはpositionにstaticを設定した場合に表示される位置です。逆に言うと position: relative; top: 0; left: 0;とした場合の表示結果とposition: static;とした場合の表示開始位置は同じになります。rightとbottomの基準位置は親要素の底辺と右の辺です。

上のCSSの例の場合、こうなります。

CSSで指定した通り、上(top)から40px、左(left)から60pxの位置に表示されます。

もし、relativeクラスのdivの前にpがあった場合はこうなります。

p要素(図中緑のヤツ)が中にある分、relativeクラスのdivは下に追いやられる形になります。

absolute

relativeより強いです(意味不明な説明) こちらはrelativeとは違い、直前に要素があろーがなかろーが親要素(追記:positionがstatic以外である必要があります)のcontentの端を基準に位置を指定します。

.absolute {
    position:absolute;
    top:40px;
    left:20px;
}

そしてrelativeクラスのdivの前にpがあった場合はこうです。

はい強い。p要素はありますが絶対位置指定なのでそんなことは関係ないのです。重なろうがはみ出ようが指定された位置に表示されます。relativeとの圧倒的な違いはここです。

fixed

最強です(意味不明) この指定は親要素に関わらずviewport、要はブラウザの表示領域を基準とし、スクロールしても表示位置が変わらないようになります。absoluteは親要素からの絶対位置指定なのでスクロールすればそれにつれて見た目上の位置は変わりますがfixedはいくらスクロールされてもいつもそこにいます。例えばTwitter Web Clientの一番上にあるホームだとか通知だとかのバーとかこのブログの上に出ているブログ名だとかグローバルナビゲーションとか出してるバーがこれにあたります。

たぶん図解はいらないしできないです。

おわり

CSSは自分で書いてみてブラウザで「\パンッ/ヨッシャアアアアアアアアアアアアwwwwwwwwwwwwww(高い声で)キタァwwwwwwwwwwウワァヤッタアアアwwwwwwwwwwwwwwwww」するのが一番いいのでコードを書きましょう

(o・▽・o)つづけばいいねー

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です