Css 子元素溢出父元素时；top"；用于绝对位置

我的子元素在应用“top:random pixel”时溢出其父元素，它似乎使用相对于主体页面的top

// HTML
            <div class="movie-list">
             <div class = "inner">
             </div>
             </div>

//CSS

             div.movie-list{
             width: 300px;
             height: 500px;
             background: black;
             margin-right: auto;
             margin-top: 20px;
          }

            div.movie-list div.inner {
            width: 50px;
            height: 50px;
            background: gray;
            position:absolute;
            top:7px;


}

//HTML
//CSS
部门电影列表{
宽度：300px；
高度：500px；
背景：黑色；
右边距：自动；
边缘顶部：20px；
}
分区电影列表分区内部{
宽度：50px；
高度：50px；
背景：灰色；
位置：绝对位置；
顶部：7px；
}

继续，将

位置：relative

添加到

div.movieclass

样式元素中。这将保持其子元素相对于其容器的绝对位置

div.movie-list{
位置：相对位置；
宽度：300px；
高度：500px；
背景：黑色；
右边距：自动；
边缘顶部：20px；
}
分区电影列表分区内部{
宽度：50px；
高度：50px；
背景：灰色；
位置：绝对位置；
顶部：7px；
}