Child element overflows parent element when " top" used in position-absolute

Question

My child element overflows its parent when applied "top: random pixel" it seems it uses top relative to body page

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


}

Answer 1

Go ahead and add position: relative to the div.movieclass style element. This keeps the absolute positioning of its child element relative to its container.

div.movie-list{
  position: relative;
  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;
}

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