position: absolute;

Web／Tips Web／Tips Web , Webデザイナー , ダメ , ポジション , メソッド , 世界 , 思考 , 期待 , 絶対 , 臨機応変 , 要素 , 距離

Webデザイナーであれば、タイトルにピンと来るはず。云わずもがな、cssにおけるプロパティのひとつだ。

positionプロパティはボックスの表示位置（ポジション）を決めるための配置方法を設定するプロパティだ。
＊実際に表示させる位置については、topプロパティ、bottomプロパティ、leftプロパティ、rightプロパティで指定する。

各プロパティの指定方法は、

  1. 実数値＋単位
  2. ％値
  3. auto

などを使用する。

1. の「単位」には「絶対単位」と「相対単位」の2通りがある。

■絶対単位
  • pt　ポイント（1ポイント＝1/72インチ）
  • pc　パイカ（1パイカ＝12ポイント）
  • cm　センチメートル
  • mm　ミリメートル
  • in　インチ（1インチ＝2.54センチメートル）
■相対単位
  • px　ピクセル
    1ピクセルを1とする単位。コンピュータ・モニタを対象とした単位であり、実際に表示される大きさは解像度（Winデフォルト96dpi、Macデフォルト72dpi）に対して相対的となる。
  • em　エム
    font-sizeプロパティの値（フォントサイズそのもの）を1とする単位。
  • ex　エックス
    フォントのx-heightを1とする単位。x-heightとは欧文小文字「x」の高さに相当する高さを表す。

単位については「px、em」などの「相対単位」が一般的に使われる。

現状、世界的なシェアを誇るWinマシンに合わせた解像度96dpiに対する、相対的な1ピクセルを用いるほうが絶対的に都合が良いのだ。

ムゥ。。悩ましい。。苦笑


2. は自ボックスを含む（親）ボックスの幅や高さに対する割合で距離を指定する。left、rightは幅に対する割合、top、bottomは高さに対する割合で指定する。

3. は要素やボックスの種類などに応じて自動的に調整される。

　猫の手や　借りたいときでも　猫いらず
　売れっ子でも　萌えっ娘でも　手間いらず
　autoってｽﾃﾁ　Hold me tight。。☆
　はぅあっっ。。

そんな感じで♪


。。て、まだ話終わってへんよ。。苦笑


えー、冒頭に話を戻します。。ｺﾎﾝ。。

「position: absolute;」とは「絶対配置」を行うための指定である。そして、そのために「相対単位」が汎用的に用いられている現状。


何とも、釈然としないのはオイラだけなのか。。？　笑


そして、非常に厄介で都合が悪いことに…　クロスプラットフォーム＆クロスブラウザを考慮したWebページを制作するに当たっては、例えば、JavaScriptなどの制御メソッドなどで divオブジェクトにアクセスする際、divオブジェクトが「絶対配置」指定されていないと…つまり「position: absolute;」に設定されていないと、期待する動作を得られなかったりするのだ。

「絶対じゃないと、絶対にダメっっ。。」

わがままなブラウザちゃんにゃ〜マジ困ったちゃん。。苦笑


「絶対配置」に対して「相対配置」と云うものがある。
「position: relative;」と指定する。


「押さば引け。引かば押せ」何とも「臨機応変」感この上ナッシング。。☆

しかし、実際には制御不能…「全く制御不能」と云う訳ではないのだが、一部の「機能」に対してしか「相対的」ではないと云う絶対的な始末…　何とも、いやはや。どないやねん　苦笑

裏技的なTipsとして… 


<div style="position: relative;">
	<div id="ターゲットオブジェクト" style="position: absolute;">
		なんやかや　どでこーで　どーしたこーした。。ﾃﾍ
	</div>
</div>

…と云った具合に、

ターゲットとする絶対的なオブジェクトを相対配置で包括して制御する──。

と、このようなアクセス方法が存在する。


何に対して応用するかは各々が魂の命ずるままに。。☆

思考の助力に　vincent.
何は無くとも　vincent.
粉骨砕身　vincent.

＿＿＿ spelt by vincent.
▲