How to overlay 2 img elements over an svg in bootstrap

[fotunato]

I want to overlay 2 images over an svg so 1 image is located at the top end of the svg while the 1 image is located at the bottom end of the svg

This is what I used when I needed to overlay just 1 image over the svg

<div class="parent">
     <svg></svg>
     <div class="child">
          <img>
     </div>
</div>

.parent {
    position: relative;
}

.child {
    position: absolute;
    top;
    bottom;
    left;
    right;
}

Just adding the 2nd img inside the child parent has not helped so I’ve tried to convert this into a form that will allow multiple img’s to no avail.
Thanks in advance.

[DobarBREND]

.child1 {
    position: absolute;
    top: 32px;
    left: 32px;
}
.child2 {
    position: absolute;
    top: 100px;
    left: 32px;
}

<div class="parent">
     <svg width="200" height="200">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
     <div class="child1">
       <img src="https://froala.com/wp-content/uploads/2019/11/post41.svg" width="50px">
     </div>
  <div class="child2">
       <img src="https://froala.com/wp-content/uploads/2019/11/post41.svg" width="50px">
     </div>
</div>

The final look on the page is:

You can now move the images as you wish…

[fotunato]

Thanks! Will try it out right now.