|
|
|
ポジションについて
HTMLでは記述された順番に要素を表示します。マージンなどで多少位置を整形できますが、それでも書かれた順に表示されるのは当然のことです。
スタイルシートのposition属性を用いると、その当たり前のことを無視でき、位置の整形も非常に簡単に出来るため、
インタラクティブなデザインをするには欠かせない属性です。
position属性の値
relative：要素の本来の位置を基準にして配置する
static：通常の配置を行う
absolute：親ボックス（通常は<body>）を基準にして配置する
absoluteはディスプレイの左上を基準に出来る上、もともとの要素のスペースは確保されないため、ほとんどの場合こちらが使用されます。
元の要素のスペースを確保したい場合などにはrelativeも時々使用されます。
absoluteまたはrelativeが適用された要素の位置を指定するには、
top,right,bottom,leftの4種類の属性が使われます。
それぞれ基準位置からの上,右,下,左の距離を指定するもので、上下のどちらか（bottomが使われることは非常に稀ですが）と
左右のどちらかを指定することで位置を決定します。
距離を指定するのにはpxやptなどの絶対的な単位をお勧めします。
emなどブラウザの設定に依存する単位の場合は意図したな位置に表示されない場合があります。
<p style="position:absolute; top:150px; left:150px; z-index:2; font-size:72px; color:red;">文字に影がつきます</p>
<p style="position:absolute; top:155px; left:155px; z-index:1; font-size:72px; color:gray;">文字に影がつきます</p>
上のサンプルでは文字に影が付きます。このサンプルの詳細はこちら。
z-indexは要素の重なりを表す属性です。設定した数値が大きいほど手前で重なります。
またpositionはJavaScriptにも頻繁に利用され、動的なDHTML
には欠かせない技術の1つです。JavaScriptのドキュメント関連で、
positionに関連したスクリプトも多く取り上げておりますので、あわせてご覧ください。
CSSの中ではかなり難易度の高い技術ですし、様々なサイズのディスプレイに合わせて作成するのは困難ですが、
慣れてしまうとDHTMLの動作に関してかなり理解が深まることと思います。
|
ポジション関連