stickyがうまく動かない

CSSでstickyを指定しているのですが、うまく動きません。
以下にcodepenに簡易的なソースを置いておりますが、

potision: sticky;
bottom: 0;

の場合はこのプログラムはうまく動くのですが、

potision: sticky;
top: 0;

の場合はtopが0の時に固定されません。
うまく動作しない理由が知りたいです。

top:0;とbottom:0;を組み合わせたいので、両方つけても動くようにしたいです。

回答をお待ちしております。