Using Angular 12.

I'm creating multiple overlays from components:

this.currentComponents.map((component, index) => {
const positionStrategy = ...
const ref = this.overlay.create({positionStrategy});
const att = ref.attach(new ComponentPortal(component)};

this.drag.createDrag(ref.overlayElement, dragConfig).withBoundaryElement...;

This creates a draggable, free-floating overlay fine. It has a component inside that works fine.

On load, we create two of these which works fine. Both are draggable elements on the page, however the second is always placed over the first. How do I re-order these elements?

Basically, when I drag element A, it should go to the top. When I drag element B, it should go to the top.