閾値としてtop: 10pxと指定したので、画面を下方向にスクロールした際に、その要素が上端から10pxの位置に到達するまではposition: relativeのように振る舞い、上端10pxの位置に到達するとそこで固定されます（position: fixedのように振る舞います）。
position: stickyによる「要素の固定」が有効となるのは、position: stickyを指定している要素の親要素の表示範囲内となります。つまり、その親要素の表示が画面から外れたり、親要素の画面上の表示部分の高さがposition: stickyを指定している要素の高さより小さくなったりしたタイミングで、固定状態は解除されます。