Положение вложенного заголовка: липкий сбой, даже если высота установлена ​​на родительский элемент

Question

• Позиция: sticky не работает, когда применяется к вложенному элементу, даже если высота уже установлена ​​для родительского элемента.

• Кажется, только когда я применяю свойство {top: 0} к вложенному дочернему элементу, тогда применяется position: sticky. Вот скриншот: https://pasteboard.co/I7EzScv.jpg

• Я хотел бы знать, почему основной заголовок будет прикрепляться только при прокрутке, только когда применяется {top: 0}.

Заранее спасибо.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> th {
        top: 0;
        position: sticky;
        background: cornflowerblue;
        color: #fff;
        box-sizing: border-box;
    }
    

    tr th:nth-child(1) {
        background: darkslateblue;
        text-align: center;
        text-transform: uppercase;
    }

    tr td:nth-child(1) {
        background: lightskyblue;
        color: white;
        text-align: center;
    }

table-box {
        width: 800px;
        height: 400px;
        overflow-y: scroll;
        box-shadow: 0 10px 100px rgba(0,0,0,0.4);
        background: #fff;
    }

    table {
        width: 100%;
        height: 800px;
        
    }

    table, th, td {
        border: 1px solid salmon;
        border-collapse: collapse;
        padding: 10px;
        text-align: left;
        text-transform: uppercase;
    }

/* The sticky element is here */