some divs are missing

i have my code as below:

 <style>
    body {
    background-color:black;
}
#paddle{
    position:absolute;
    background-color:white;
    width:20vw;
    height:5vw;
    top:96vw;
#ball{
   top:116vw;
   left:38vw;
   position:absolute;
   width:4vw;
   background-color:white;
   height:4vw;
   border-radius:50%;
   min-height:4vw;
   max-height:4vw;
   min-width:4vw;
   max-width:4vw;
}
#container{
   left:10vw;
   right:10vw;
   width:80vw;
   height:120vw;
   position:relative;
   background-color:grey;
   
}
    </style>
    <div id="container">
    <div id="ball"></div>
    <div id="paddle"></div>
    </div>

however, only paddle appear on the viewport.
I need to have container with position relative, and ball and paddle with position absolute, because it is nessary in order for my other codes to work, Can anyone please tell me how can i get all of them displayed properly without modifying the position attribute of those divs?

thx a lot!