Webﾃﾞｻﾞｲﾅｰであれば､ﾀｲﾄﾙにﾋﾟﾝと来るはず｡云わずもがな､cssにおけるﾌﾟﾛﾊﾟﾃｨのひとつだ｡
positionﾌﾟﾛﾊﾟﾃｨはﾎﾞｯｸｽの表示位置(ﾎﾟｼﾞｼｮﾝ)を決めるための配置方法を設定するﾌﾟﾛﾊﾟﾃｨだ｡
*実際に表示させる位置については､topﾌﾟﾛﾊﾟﾃｨ､bottomﾌﾟﾛﾊﾟﾃｨ､leftﾌﾟﾛﾊﾟﾃｨ､rightﾌﾟﾛﾊﾟﾃｨで指定する｡
各ﾌﾟﾛﾊﾟﾃｨの指定方法は､
などを使用する｡
1. の｢単位｣には｢絶対単位｣と｢相対単位｣の2通りがある｡
単位については｢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.
Tags: Web, Webﾃﾞｻﾞｲﾅｰ, ﾀﾞﾒ, ﾎﾟｼﾞｼｮﾝ, ﾒｿｯﾄﾞ, 世界, 思考, 期待, 絶対, 臨機応変, 要素, 距離
(C) Art Studio Vincent. All Rights Reserved.
Powered by MT4i 3.1