Svg over HTML

HTML

<!-- the circle should appear above the green div -->
<div class="a">
  <svg width="400px" height="400px">
    <circle cx="390" cy="100" r="50" x="100" style="stroke: black; fill: yellow;"/>
  </svg>  
</div>
<div class="b"></div>

CSS

div.a {
  width: 400px;
  height: 400px;
  background: lightgrey;
}

div.b {
  width: 200px;
  height: 400px;
  background: lightgreen;
  position: absolute;
  top: 8px;
  left: 400px;
}