cdkDragFreeDragPosition position depends from each previous cdkDrag element

When i adding few cdkDrag elements on page, position each of them depends from previous element. Looking on my screen, if i move "Item 3" to 0x0 of container, "Item 3" coordinates will -250x0. So question is: how to make position of each element independent from previous elements? For example if i set x:0, y:0 for all elements, each one must be over another.

Of course i know one way, by calculating position depends from width and height of previous element, but maybe we have more elegant and easy way?

Here is my code:

<div class="col-md-6">
    <div class="example-boundary">
        <div cdkDrag class="design-box"
             [cdkDragFreeDragPosition]="{x:0, y:0}"
             (cdkDragEnded)="dragEnded_new($event)">
            Item 1
        </div>

        <div cdkDrag class="design-box"
             [cdkDragFreeDragPosition]="{x:0, y:0}"
             (cdkDragEnded)="dragEnded_new($event)">
            Item 2
        </div>

        <div cdkDrag class="design-box"
             [cdkDragFreeDragPosition]="{x:0, y:0}"
             (cdkDragEnded)="dragEnded_new($event)">
            Item 3
        </div>
    </div>
</div>

Have you try putting your design-box class with

position: absolute