こんにちは、「BRANCH FOR PRO」の中の人です。

今回はCSSの中でもわかりにくい部類に入る「position」プロパティについてご説明したいと思います。

そもそも「position」プロパティとはなんぞや、と言いますと、「要素が表示される位置の指定」です。

ここまでは比較的理解は難しくないと思うのですが、その値に何をセットすればどのように表示されるかについて混乱すると思います。

ここでは代表的な値である「relative」と「absolute」についてご説明したいと思います。

まず、内側に「position」プロパティを指定するためには、親要素に「position」プロパティを指定し、その値が「static(本来の位置に固定的に表示)」『以外』でなければなりません。

「position」プロパティを指定しないと、「position: static;」が指定されたとみなされるので、内側の「position」プロパティが効いてきません。ここが要注意な点です。

ご説明の前に、実際のHTMLファイルとCSSファイルを御覧ください。

これがHTMLファイルです。

<!DOCTYPE html>
<html lang="ja">
    <head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<title>absoluteの確認</title>
    </head>
    <body>
	<div id="outer">
	    <p id="text1">ここには任意のタグが入ります(今は&lt;p&gt;タグ)</p>
	    <p id="text2">relativeでオフセットが左に20pxの&ltp&gt;タグです</p>
	    <div id="inner1">absoluteでオフセットなし</div>
	    <div id="inner2"><div>absoluteで左に10pxオフセット</div></div>
	    <div id="inner3"><div>absoluteで右に10px、上に10pxオフセットあり(任意のタグを無視しています)</div></div>
	    <div id="caption">ここが親要素です</div>
	</div>
    </body>
</html>

次に、CSSファイルです。

@charset "UTF-8";

/* 親要素の <div> 要素です position: relative; になっています */
#outer {
    position: relative;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 500px;
    border: solid 1px #000000;
    color: #000000;
}

/* 親要素に入っている <p> 要素です position は指定していません*/
#text1 {
    margin: 0;
    padding: 0;
    border: solid 1px #ff0000;
    color: #ff0000;
}

/* 親要素に入っている <p> 要素です position: relative; で、オフセットは左に 20px を指定しています */
#text2 {
    position: relative;
    margin: 0;
    padding: 0;
    border: solid 1px #008b8b;
    color: #008b8b;
    text-align: right;
    left: 20px;
}

/* 親要素に入っている <div> 要素です オフセットを指定していません */
#inner1 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 200px;
    border: solid 1px #000000;
}

/* 親要素に入っている <div> 要素です オフセットは左に 10px を指定しています */
#inner2 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 200px;
    border: solid 1px #00ff00;
    left: 10px;
}

/* #inner2 のキャプションです 下に対して 0 のオフセットを指定しています */
#inner2 div {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
    color: #00ff00;
}

/* 親要素に入っている <div> 要素です 上に対して 10px 右に対して 10px のオフセットを指定しています */
#inner3 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 200px;
    color: #000000;
    border: solid 1px #000000;
    top: 10px;
    right: 10px;
}

/* #inner3 のキャプションです 下に対して 0 のオフセットを指定しています */
#inner3 div {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
}

/* 親要素のキャプションです 下に対して 0 のオフセットを指定しています */
#caption {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
}

ファイルを見ていただいたところで、値が「absolute」の場合をご説明します。

「absolute」とは「絶対的な」という意味ですので、表示位置を(親要素の左上を基準に)絶対的に指定するものです。

基準は「親要素の左上」で、そこからのズレ(偏位、オフセットと言います)を「top(上の余白)」「bottom(下の余白)」「left(左の余白)」「right(右の余白)」で指定します。

また、値が「relative」の場合は、「相対的な」という意味ですので、「本来表示される位置」からのオフセットを、やはり「top」「bottom」「left」「right」で指定します。

では論より証拠、上記のHTMLとCSSで表示される画面をご覧ください。

HTMLファイルとCSSファイルを見ていただければ、位置関係がお分かり頂けるかと思います。

ここで注目すべき点があります。

「position」プロパティが「absolute」で、なおかつオフセットで「top」を指定していない場合、「position」プロパティ無しや、「position」プロパティが「relative」の要素を「避けるように」表示されているのがお分かりでしょうか?

「absolute」は「絶対位置」なのですが、「top」を指定していないとこのような表示になります。

逆に、オフセットに「top」を指定している場合、これは文字通りに「絶対的な位置」で、「positionプロパティ無し」や「positionプロパティがrelative」に関係なく表示されています。

では今度は、「『absolute』で『relative等を避ける』のはわかったが、『relative』が上下に動いた場合はどうなるの?」という点についてご説明します。今度は、HTMLとCSSを次のように変えます。

<!DOCTYPE html>
<html lang="ja">
    <head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<title>absoluteの確認</title>
    </head>
    <body>
	<div id="outer">
	    <p id="text1">ここには任意のタグが入ります(今は&lt;p&gt;タグ)</p>
	    <p id="text2">relativeでオフセットが上に7pxの&ltp&gt;タグです</p>
	    <div id="inner1">absoluteでオフセットなし</div>
	    <div id="inner2"><div>absoluteで左に10pxオフセット</div></div>
	    <div id="inner3"><div>absoluteで右に10px、上に10pxオフセットあり(任意のタグを無視しています)</div></div>
	    <div id="caption">ここが親要素です</div>
	</div>
    </body>
</html>
@charset "UTF-8";

/* 親要素の <div> 要素です position: relative; になっています */
#outer {
    position: relative;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 500px;
    border: solid 1px #000000;
    color: #000000;
}

/* 親要素に入っている <p> 要素です position は指定していません*/
#text1 {
    margin: 0;
    padding: 0;
    border: solid 1px #ff0000;
    color: #ff0000;
}

/* 親要素に入っている <p> 要素です position: relative; で、オフセットは上に 7px を指定しています */
#text2 {
    position: relative;
    margin: 0;
    padding: 0;
    border: solid 1px #008b8b;
    color: #008b8b;
    text-align: right;
    top: 7px;
}

/* 親要素に入っている <div> 要素です オフセットを指定していません */
#inner1 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 200px;
    border: solid 1px #000000;
}

/* 親要素に入っている <div> 要素です オフセットは左に 10px を指定しています */
#inner2 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 200px;
    border: solid 1px #00ff00;
    left: 10px;
}

/* #inner2 のキャプションです 下に対して 0 のオフセットを指定しています */
#inner2 div {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
    color: #00ff00;
}

/* 親要素に入っている <div> 要素です 上に対して 10px 右に対して 10px のオフセットを指定しています */
#inner3 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 200px;
    color: #000000;
    border: solid 1px #000000;
    top: 10px;
    right: 10px;
}

/* #inner3 のキャプションです 下に対して 0 のオフセットを指定しています */
#inner3 div {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
}

/* 親要素のキャプションです 下に対して 0 のオフセットを指定しています */
#caption {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
}

ここで、いままで「position: relative;」で「left: 20px;」であった部分を「top: 20px;」に変更してみます。するとどうなるでしょうか?

次のような画面になります。

なんと、上にオフセットを指定していない「absolute」でも、本来の位置は避けるけれど、上下に動いた「relative」までは避けていないことが分かります。

このような、実際に見てみれば分かるのですが、見てみないと予想がつかない動作をするのが「position」プロパティです。

以上で記事を終わります。読んでいただきましてありがとうございます。