positionプロパティで位置を調節(1)

とある日、お取引先で
「プライオリティーを考えてアジェンダを作るなんて基本だろ。しかも事前にマターだけでディシジョンを取れるところを取ってないからああやってMTG(ｴﾑﾃｨｰｼﾞｰ)が長引く事になるし、彼らはコンプライアンスのプロフェッショナルなんだからディシジョンが貰えればその確認もOKというわけじゃん？　あんなに長いMTG(ｴﾑﾃｨｰｼﾞｰ)してペンディングをするかしないかも決められないっていうのは君のスキル不足という訳。グローバルスタンダードって分かる？あとちゃんとファクトベースで資料を作らないと。MTG(ｴﾑﾃｨｰｼﾞｰ)の目的はコンセンサスを取ることが本質だろ？　次からはもっとしっかりやってくれよ。分かった？」
と新入社員さんらしき若い方が怒られていました。

というわけでみなさまおこんばんにちわ。

続いて『position』プロパティについて勉強していきましょう。『position』はそのまま「ポジション」と読めばOKでございます。

こちらのプロパティもフロートと同じように要素の位置を調整するCSSプロパティです。

『position』プロパティはフロートよりもさらに自由に要素の位置を調整することができます。しかしフロートよりちょっとややこしい感じです。慣れないうちはかなり大変だと思いますが頑張ってくださいね。

というわけでちょっとサンプルをみてみましょう。以下をクリックしてみてください。

<div style="position: relative; height: 400px; background-color: silver;">
    <div style="position: absolute; top:200px; left: 200px; width: 200px; height: 200px; background-color: red;"></div>
    <div style="position: absolute; top:100px; left: 100px; width: 200px; height: 200px; background-color: aqua;"></div>
</div>

サンプルをみてみる。

かなり自由な位置に配置できているのがわかりますでしょうか。要素を重ねたりすることも出来ますので使い方によってはかなりトリッキーな実装ができます。

では記述方法を学んでいきましょう。『position』プロパティで取れる値は以下の4つです。

• static (すたてぃっく)
• relative (りらてぃぶ)
• absolute (あぶそりゅーと)
• fixed (ふぃくすと　もしくは　ふぃくすど、ふぃっくすど　などなど)

そして『position』プロパティと一緒に使用される『top』、『bottom』、『left』、『right』プロパティについての概要はこんな感じです。取れる値は色々ありますが、実際使用される単位はほぼ『px』のみです。ちなみに初期値は『auto』となっています。

ではこれらの解説をしていきます。上の表の『基準となる位置』という言葉を覚えておいて下さい。

まず『static』という値についてですが、これは通常の配置にするという値で、各HTML要素の『position』プロパティの初期値は『static』です。

ちょっと注意点ですが、通常の要素に対して『top』、『bottom』、『left』、『right』プロパティを効かせることはできません。『top』、『bottom』、『left』、『right』プロパティを反映させるには『position』プロパティに『static』以外の値を設定する必要があります。これ忘れやすいので要注意です。

『static』に関してはこれまで色々と扱ってきた通常の要素に戻す、という値なので解説はいらないですね。

続いて『relative』という値の使い方を勉強していきましょう。

これは通常配置される場所から『top』、『bottom』、『left』、『right』プロパティを使って位置を調整することができるというプロパティです。

言葉で説明すると体感しづらいので実際にみてみましょう。

以下をみてください。

<div style="position: relative; width: 200px; height: 200px; background-color: red;"></div>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

『position: relative』を設定したdiv要素を記述し、その後にp要素を設置しました。今この段階では通常の要素のレンダリングと変わらないと思います。

ここに『top』プロパティを記述してみます。値は100pxです。ついでに要素を透過できる『opacity』というプロパティに『0.5』と設定しておきます。これで半分透けるので分かりやすくなるはずです(古いIE以外)。以下のサンプルをみてみてください。

<div style="position: relative; top: 100px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

要素の位置がズレているのが確認できたと思います。続くp要素に重なっていますね。このような感じで『position: relative』を設定すれば『top』、『bottom』、『left』、『right』プロパティを使って表示位置を調整することができます。

さて、先ほど出てきた『基準となる位置』という言葉を思い出して下さい。『top』、『bottom』、『left』、『right』プロパティの『基準となる位置』とは一体どこになるのでしょうか。

これがややこしいのですが『基準となる位置』は『position』プロパティの値によって変化があります。『position: relative』を設定した場合は『通常のドキュメントフローで配置される位置』が『基準となる位置』となります。

先ほどのサンプルをみてみると、『position: relative』を設定しただけでは表示位置に特に変化はありませんでしたね。『position: relative』を指定した場合はこの変わらなかった通常の配置位置が基準となります。

そこから『top: 100px』と指定することによって通常の配置位置の上から100px分ズレて表示されます。

例えばこれを『bottom: 100px』、『left: 100px』に変更してみるとこのようなレンダリングになります。

<div style="position: relative; bottom: 100px; left: 100px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

先ほどの通常配置される位置から上へ100px、右へ100pxズレて表示されています。要素がウィンドウからはみ出してしまっていますね。なんとなく『position: relative』の挙動がつかめてきたでしょうか。

div {
    position: relative;
    top: 100px;
    bottom: 100px; /* topプロパティが優先だから反映されないよ */
    left: 100px;
    right: 100px; /* leftプロパティが優先だから反映されないよ */
}

さてこちらの『position: relative』の挙動で注目すべきところが一点あります。

先ほどの記述を追記してdiv要素をもっとあさっての方向にすっとばしてみましょう。

<div style="position: relative; top: 300px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

『top: 300px』と記述してもっとあさっての方向にすっとばしてみました。

続くp要素に注目してみましょう。手前の要素、この場合はdiv要素ですね、これを『position: relative』でおもいっきり位置を変更してもp要素の位置は変わっていません。手前の要素があさっての方向にすっ飛んでいるのでp要素は上へ詰まって表示されそうですがそういう挙動はありませんね。

これは『position: relative』を指定している要素の位置を変更しても元々表示される領域はそのまま変わらず存在しているということを指しています。『position: relative』で位置が変更された要素が存在していても後続している要素は通常と変わらない配置で表示されるということです。

ちょっと難しいかもしれませんが、次の『absolute』という値の特徴を見てみるとその差がはっきりとつかめると思います。

というわけで続いて『absolute』について勉強していきましょう。

『absolute』という値を取った場合の『基準となる位置』は祖先要素の『position』プロパティに『static』以外の値が指定されている場合には直近の祖先要素が基準位置となり、祖先要素の『position』プロパティに『static』以外の値が指定されていなかった場合はウィンドウが基準位置となります。

言葉にするとなんとも難しいですね。ひとつひとつ挙動を確認してみましょう。

まず祖先要素の『position』プロパティが『static』以外の値、というわけで親要素には『position: relative』を指定します。んでもって適当に『position: absolute』と記述してみましょう。『top』、『bottom』、『left』、『right』プロパティは指定しません。そして目視しやすいようにまたちょいと透過させます。

そうするとこうなります。

<div style="position: relative;">
    <div style="position: absolute; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
    <p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
</div>

サンプルをみてみる。

先ほどの『position: relative』と比べるとレンダリングに大きな違いがありますね。続くp要素が『position: absolute』と指定されているdiv要素に重なって表示されています。

『position: relative』と記述しても『top』、『bottom』、『left』、『right』プロパティを指定しなかった場合は特にレンダリングに変化はありませんでした。しかし『position: absolute』と設定するとこのように通常とは大きく違った形でレンダリングされます。

これは『position: absolute』と設定されている要素は通常のドキュメントフローから完全に切り離され、その要素が元々配置されるはずだった領域は存在しなかったものとして詰まってレンダリングされるという理由から起こる現象です。元々の領域が残る『position: relative』とはちょうど逆になる形ですね。

続いて『position: absolute』と設定された要素に『top』、『bottom』、『left』、『right』プロパティを指定してみましょう。先ほどの要素に『top: 100px』と『left: 100px』を追記してみます。

そうするとこのような配置になります。以下のサンプルをチェックしてみてください。

<div style="position: relative;">
    <div style="position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
    <p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
</div>

サンプルをみてみる。

ちょっと分かりづらいですかね。じゃあdiv要素とp要素を逆転してみましょう。

<div style="position: relative;">
    <p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
    <div style="position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
</div>

サンプルをみてみる。

いかがでしょうか。div要素とp要素の位置を逆転したのに先ほどと配置が変わっていません。

『position: relative』では通常配置される場所を基準として位置が決定されますが、今回の『position: absolute』は親要素であるdiv要素に『position: relative』が指定されているので、このdiv要素が基準位置となります。つまりこの場合のように基準となる親要素の位置が変わらなければdiv要素とp要素の順番を逆にしても表示結果は同じということになります。

では親要素に『margin-top: 100px』を指定してみましょう。

すると

<div style="position: relative; margin-top: 100px;">
    <p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
    <div style="position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
</div>

サンプルをみてみる。

親要素に引っ張られてちゃんと位置が変更されていますね。

さらに今の親要素のdiv要素から『position: relative』を外すとウィンドウを基準として位置が決定されます。

以下のように書くと親要素のdiv要素の位置とは関係なく常にウィンドウの下から100px左から100pxの位置に表示することができます。

<div>
    <div style="position: absolute; bottom: 100px; left: 100px; width: 200px; height: 200px; background-color: red; opacity: 0.5;"></div>
</div>

サンプルをみてみる。

これが『position: absolute』のレンダリングとなります。ちょっと難しいと思いますがよく使うプロパティなので使いこなせるように頑張っていきましょう。

さて、フロートと同じように通常のドキュメントフローから切り離されてレンダリングされる、ということでピン！と来た方いらっしゃるかと思いますが、親要素は『position: absolute』が設定されている子要素の高さを自身の高さに反映できません。

「またかぁ」と思った方、「また」でございます。フロートを思い出しますね。というわけで実験してみましょう。

シンプルに書きました。親要素であるdiv要素には灰色の背景色を指定し、子要素には『position: relative』を指定しています。サンプルをチェックしてみてください。

<div style="position: relative; background-color: silver;">
    <div style="position: relative; width: 200px; height: 200px; background-color: red;"></div>
</div>

サンプルをみてみる。

いかがでしょうか。灰色の背景色がちゃんと表示されていますね。つまり親要素に子要素の高さが反映されているということです。

では『position: absolute』を指定してみると

<div style="position: relative; background-color: silver;">
    <div style="position: absolute; width: 200px; height: 200px; background-color: red;"></div>
</div>

サンプルをみてみる。

はい、ダメっぽいですね。灰色の背景色が全く見えていないということは親要素の高さは0になっています。高さが反映できていません。

フロートの場合は高さを反映させる方法がいくつかありましたが、CSSのみでは『position: absolute』と設定された子要素の高さを親要素の高さに反映させる方法はございません。

CSSのみで高さを与えたい場合は子要素を『position: relative』に変更するか、親要素に直接『height』プロパティを指定する必要があります。あとはJavaScriptでプログラム書いちゃうのが無難ですね。

この子要素の高さを反映できないというのは『position: absolute』を使用する際にミスしやすいところなので注意しましょう。

さてかなり長くなってきてしまったので一旦記事を切ります。

『position: relative』と『positon: absolute』の挙動は把握できてきましたでしょうか。

要素の領域が残るか残らないか、あと基準となる位置に差がありますね。コツを掴むまでがちょっと難しいかもしれません。

次の記事では『position: fixed』と『z-index』について勉強していきます。引き続き頑張っていきましょう。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア