Why does the block disappear at position: absolute?

Question

css

Hello.
There is a problem, I set the block in which the elements are position: relative;
And it should look like this: prntscr.com/f5vfrx Set
the images to position: absolute; and arrange the elements.
But the block somehow left prntscr.com/f5vgb1

<div id="puzzle">
      <img id="img1" src="img/v1/puzzle/1.png" alt="">
      <img id="img2" src="img/v1/puzzle/2.png" alt="">
      <img id="img3" src="img/v1/puzzle/3.png" alt="">
      <img id="img4" src="img/v1/puzzle/4.png" alt="">
      <img id="img5" src="img/v1/puzzle/5.png" alt="">
      <img id="img6" src="img/v1/puzzle/6.png" alt="">
      <img id="img7" src="img/v1/puzzle/7.png" alt="">
      <img id="img8" src="img/v1/puzzle/8.png" alt="">
      <img id="img9" src="img/v1/puzzle/9.png" alt="">
      <img id="img10" src="img/v1/puzzle/10.png" alt="">
      <img id="img11" src="img/v1/puzzle/11.png" alt="">
      <img id="img12" src="img/v1/puzzle/12.png" alt="">
      <img id="img13" src="img/v1/puzzle/13.png" alt="">
      <img id="img14" src="img/v1/puzzle/14.png" alt="">
      <img id="img15" src="img/v1/puzzle/15.png" alt="">
      <img id="img16" src="img/v1/puzzle/16.png" alt="">
      <img id="img17" src="img/v1/puzzle/17.png" alt="">
      <img id="img18" src="img/v1/puzzle/18.png" alt="">
      <img id="img19" src="img/v1/puzzle/19.png" alt="">
      <img id="img20" src="img/v1/puzzle/20.png" alt="">
    </div>

#puzzle{
  position: relative;
  border: 5px solid #333;
  margin: 0 auto;
  background: url(img/v1/v1-watercolor.jpg) no-repeat;
  background-size: cover;
}

#puzzle  img{
  position: absolute;
}