CSS には color などの属性以外、いろんなルールがあります。今までちょっといたい目にあったことをまとめておきました。↓
1 position : absolute, relative
HTML のエレメントはブラウザのウィンドウのどこに表示するかはいろいろルールがあります。一般的にこれはブラウザ自身が決まります。例えば、div がブロック要素なので、display 属性を指定しないと、次の行から表示されます。
要素のポジションを変えたい場合は、position を使います。もし position を指定しないと、デフォルトの値が static になります。
position:relative の意味は 親と static の位置より、left/top/right/bottom で指定した値に従って、相対的に移動します。相対位置になります。
position:absolute の意味は親の位置より、left/top/right/bottom で指定した値に従って、表示されます。absolute というのは絶対位置です。
position: fixed はちょっと違います。Fixed は一般的にブラウザの document より位置が決まります。エレメントを常に表示したいときは使います。
今までのプロジェクトでは relative と absolute はよく使います。なぜなら、デザインより、要素を位置を変えたいから。当たり前ですけど。
注意すべきところは、親の位置から relative / absolute になります。この親は必ず position が static ではない親です。もし見つからなければ、 body エレメントに参考して、位置を決めます。
例として、ツールチップを実現したいですが、 js ライブラリを使いたくない場合、css の hover で display 属性を none/block で切り替えます。ツールチップ span エレメントで定義している場合、この span の位置を変えたい場合、親の position を relative にして、left/top/right/bottom を指定しない場合は、 static と同じ位置になりますが、 span はこの親により位置が決まります。
それでは。
