カスタマイズで覚えておきたいCSSのposition

カスタマイズ初心者の方は、この記事を読む前に下記の記事を読まれることをオススメします。

それでは本題のカスタマイズで覚えておきたいCSSのpositionを説明していきます。

理解するのが難しいposition: relativeとposition: absolute

カスタマイズをする際にposition: relativeとposition: absolute上手く使ってカスタマイズする事があるんですが、理解するまでが難しいです。

CSSを使ったテクニックの中では高度な事を行っているので、基本をじっくり理解して覚えていきましょう。

positionには4つの値があり、それにより配置方法を決めることが出来ます。配置方法を簡単に説明しますが、ここでは何となく分かれば大丈夫です。

static: 通常の配置で表示します。この値のみtop,right,bottom,leftの各プロパティは適用されません。
relative: 通常表示される位置から相対的な位置に配置します。この中にあるボックスでabsoluteを使った場合は、このブロックが基準になります。
absolute: 絶対的な配置です。通常はウィンドウ全体の左上が基準位置となります。親ブロックにrelativeが使っている場合にはそこが基準に配置されます。
fixed: ウィンドウ全体の左上が基準位置となりスクロールしても移動しなくなります。

以上がpositionの4つの値です。
ここではrelativeとabsoluteを使っていくんですが、それにはhtml内にある親子関係を知っておく必要があります。

position: relativeとposition: absoluteを使ったカスタマイズを行うにはhtmlコードの親子関係を知っておく必要があります。

以前紹介した記事「カスタマイズする時に理解しておきたいdiv要素」で紹介したかなり短縮したコードで親子関係を説明していきます。
※下記のコードはアメブロのソースをかなり短縮したようなコードです。

これを親子関係が分かりやすいように家系図風にしてみます。

このコード及び親子関係で出来上がったレイアウトは下記のような感じになります。

これを立体的な箱として表して見ると下記図のような感じになります。

box1,2に対する親要素を分かりやすくする為に親要素以外のブロックを除いてみます。
残っているブロックがbox1,2に対する親要素になります。

上記図のようにbox1はこのようなブロックで囲まれていて、残ったブロックがbox1の親ブロックになります。

box1の親要素にposition: relativeを使って、box1にposition: absoluteを使い配置した場合はbox1の親要素が基準になりますので、position: absoluteの絶対配置イメージは下記図のような感じになります。

それではbox1にposition: absoluteをセットしbox1の親要素の一つであるコンテンツブロックにposition: relativeを使いbox1を絶対配置してみます。

box1の親要素の一つであるコンテンツブロック(.skinContentsArea)を基準にbox1を絶対配置してみます。
cssのコードは下記のような感じになります。

.skinContentsArea {
 position: relative;
}
#box1 {
 position: absolute;
 top:30px;
 left:50px;
 }

box1はコンテンツブロック(.skinContentsArea)を基準に上から30px、左から50pxの位置に絶対配置されます。
下記図はそのイメージになります。

ここまでがカスタマイズで覚えておきたいCSSのpositionの説明になります。

この記事でも説明したとおりposition: relativeとposition: absoluteを使いこなすには、まずはhtmlコードの親子関係を理解しておかないといけません。

ここでは短縮したコードで説明しましたが、実際はもっと長いコードでブログは作成されてます。
ですが、以前紹介した「Google Chrome Developer Toolsで要素を確認」を利用すれば親子の要素関係は簡単に分かります。

長い説明になりましたが、position: relativeとposition: absoluteが理解できれば、カスタマイズの幅もかなり広がってきます。

カスタマイズするなら必ず覚えておきたい大事なcssコードなので、この記事を読まれて少しでも理解できればと思ってます。

最終更新日: 2013年3月8日