I have created a simple div and svg..

```css
#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 80px;
  left: 55px;
  top: 20px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  pointer-events: all;
}
```

```html
<div>
  <div id='firstElement'></div>
  <svg>
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>
```

The firstElement(ID) is not visible even if I set the `z-index`.

My expected output is, `border` -> `firstElement` -> `circle`

[![enter image description here](https://i.stack.imgur.com/2X73D.png)](https://i.stack.imgur.com/2X73D.png)

how to acheive this?