Есть ли способ поместить элемент SVG выше HTML div с абсолютной позицией?

Question

Я новичок в D3.js, и у меня есть особая проблема.Я пытаюсь поместить один элемент (круг) внутри SVG над HTML-дивом с абсолютной позицией. Есть что-то, что я мог бы сделать там?

Я попытался поместить z-index, изменить типы позиций ... Я думаю, что моя проблема в SVG, что я не могу применять те же правила, что и в обычном HTML.

См. Этот пример https://jsfiddle.net/L70yk9f1/13/

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

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

<!-- 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>

Я пытаюсь поместить желтый кружок (один элемент внутри SVG) над зеленым делением.

Answer 1

Я думаю, это то, что вы хотите ..?

div.a {
  width: 100%;
  height: 400px;
  background: lightgrey;
  position:absolute;
}
div.a svg{
    position: absolute;
    z-index: 999999;
    width: 100%;
    height:100%;
}
div.b {
  width: 200px;
  height: 400px;
  background: lightgreen;
  position: absolute;
  top: 8px;
  left: 400px;
}

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