position absoluteで、、top:0,bottom:0(又はtop:0,bottom:0,left:0,right:0)を指定することはcss的にどのような意味を持つのでしょうか。

Question

ふと気になりました。
要素の幅などが変わるのでしょうか。
それともその要素の挙動を変えることができるのでしょうか。

Comments

[kei344]

回答に対してわからない箇所が有るならコメントしたり、質問文に内容を追記したりしましょう。

Answer 1

topとbottomなど対になる（反対側の）プロパティに0を指定すると配置のエリアがその指定間いっぱいに広がります。topの0位置からbottomの0位置まで、relative要素と同じだけの配置領域ができます。
その中に幅(width)や高さ(height)を持った要素を配置した場合に、margin:autoで要素を中央に配置する事ができます。
上下中央に配置する方法として、topを50%にしてmargin-topを要素の半分のネガティブマージンにする方法もありますが、要素の大きさが変わった場合に、要素と共にmargin-topも変更する必要があります。
topとbottomに0を設定しておいてmargin:autoを設定しておく方法だと、要素の変更のみで済むので、メンテナンスが容易というメリットがあります。

Comments

[speed_e]

ありがとうございます。