overlay (nested) divs

HTML

<div id="parent">
 parent
 <div id="child">
  <div>40%</div>
 </div>
</div>

CSS

body {background:rgba(155,170,0,.5);}
#parent {
  position:absolute;
  width : 300px;
  height: 300px;
  left: 200px;
  float:left;
  overflow-y:scroll;
  background-color: yellow;
  border-radius: 50% 50% 50% 2px;
}
#child {
  color:#fff;
  height:auto;
  z-index:5;
  font-size:28px;
  text-align: center;
  vertical-align: middle;
  line-height: 240px; 
}
#child > div {
    background:#ff0000;
    position: relative;
    
    left: 20px;
    width : 260px;
    height : 260px;
    border-radius:70%;
}