如何在其他 div 之上排列 svg 元素？

Question

I am trying to arrange this small SVG rectangle on top of the base rectangle present in the same SVG viewBox and on top the other div which is just below it.

Any help would be appreciated.

Edit 1 I want rect with id="over" top of div with class="firstrect" and div with class="secondrect".

 .main { position: relative; }.secondrect { width: 100%; background: purple; height: 30px; } #over { position: absolute; }

 <div class="main"> <div class="firstrect"> <svg viewBox="0 0 50 10"> <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" /> <rect id="over" x="10" y="9" width="20%" height="20%" style="fill: rgb(102, 201, 171);" /> </svg> </div> <div class="secondrect"></div> </div>

Answer 1

1. Add class="viewbox" to the viewbox.
2. Then, add overflow: visible on said class
3. Then adjust x and y coordinates as you see fit

 .main { position: relative; } /*Add class="viewbox" to viewbox */.viewbox { overflow: visible; }.secondrect { width: 100%; background: purple; height: 30px; } #over { position: absolute; }

 <div class="main"> <div class="firstrect"> <svg viewBox="0 0 50 10" class="viewbox"> <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" /> <rect id="over" x="10" y="9" width="20%" height="30%" style="fill: rgb(152, 251, 071);" /> </svg> </div> <div class="secondrect"></div> </div>

Answer 2

set svg overflow: visible;

 svg { overflow: visible; }.secondrect { width: 100%; background: purple; height: 30px; } #over { position: absolute; }

 <div class="main"> <div class="firstrect"> <svg viewBox="0 0 50 10"> <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" /> <rect id="over" x="10" y="9" width="20%" height="20%" style="fill: rgb(102, 201, 171);" /> </svg> </div> <div class="secondrect"></div> </div>