嵌套的标题位置：即使将高度设置为父元素，粘贴也会失败

Question

• 位置：应用于高度的嵌套元素时，即使将高度设置为父元素，粘性也不起作用。

• 似乎只有当我将{top：0}的属性应用于嵌套的子元素时，position：sticky才适用。这是屏幕截图：https://pasteboard.co/I7EzScv.jpg

• 我想知道为什么仅在应用{top：0}时滚动才显示主标题。

先谢谢您。

 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 */