今回は position プロパティーのおもしろい動きについて調べてみました。
relative と absolute の違いが少し複雑で調べるのに時間がかかりました。
relative だけを使う場合と、absolute と一緒に使う場合があるようです。
今回はよく使われる、文字の貼り付けについて調べました。
relative と absolute
relative と absolute はセットで使うことが多いと思います。
このふたつの関係にはいろんな動きがあるので、ここではよく使われるものを調べてみました。
写真の中に文字を貼り付けるという、よくあるデザインです。
relative と absolute を使うにはひとつの条件があります。
ふたつの要素が入れ子になっているということが必要です。
この写真では、外枠がピンクで中が写真になっていますがいまはこの写真は関係ありません。
ピンクの外枠を基準に文字が移動します。
このように外枠 div に内枠には写真と文字「楽々園」がふたつあります。
上の写真では「楽々園2」が外枠の右下になっています。
これは absolute が外枠を基準にしていることを示しています。
上の例では格好が悪いので、この写真のように左上とか右下とかに配置すると思います。
こうするためには写真と外枠をおなじ大きさにすればピッタリとはまります。
この機能をうまく使えば、ほかのソフトを使わなくてもある程度のデザインができるとおもいます。
