Как можно закрепить див к другому диву

body { 
  width: 100vw; 
  height: 100vh; 
  overflow: hidden; 
  margin: 0; 
} 
 
#bubble { 
  display: block; 
  width: 100px; 
  height: 50px; 
  background: green; 
  position: relative; 
  animation: way 10s linear infinite; 
} 
 
#ball { 
  display: block; 
  width: 30px; 
  height: 30px; 
  background: red; 
  position: absolute; 
  top: -15px; 
  right: -15px; 
} 
 
@keyframes way { 
   0% {left: 0vw;  top: 15px;} 
  10% {left: 10vw; top: 50vh;} 
  20% {left: 30vw; top: 60vh;} 
  30% {left: 50vw; top: 20vh;} 
  40% {left: 20vw; top: 60vh;} 
  50% {left: 50vw; top: 70vh;} 
  60% {left: 60vw; top: 80vh;} 
  70% {left: 80vw; top: 40vh;} 
  80% {left: 40vw; top: 10vh;} 
  90% {left: 20vw; top: 20vh;} 
 100% {left: 0vw;  top: 15px;} 
}

<div id="bubble"> 
  <div id="ball"></div> 
</div>