CSSのpositionでtop bottom left right全て指定した結果

CSSでpositionプロパティでabsoluteを指定した上で座標の指定をtop bottom left right と四方向すべてに対して行ったとしたらどうなるでしょうか。
結果はサンプルのとおりになります。

top bottom left right全て指定したサンプル
CSSコード

div{
 background-color:pink;
 position:absolute;
 top:20%;
 bottom:20%;
 left:20%;
 right:20%;
}

ポイントはwidthとheightを指定していないことです。つまりwidthとheightはautoの状態になっています。
ということは、topで矩形の上辺の位置が決まり、bottomで下辺の位置が決まります。同様にleftで左辺の位置、rightで右辺の位置が決まります。
widthとheightは決まっていませんので、ブラウザの幅や高さに依存した形となるわけです。
包含ブロックの仕組みを利用した方法ですが、ちょっとしたテクニックで応用されますので覚えておきましょう。