I have a Blazor server application with few components on a page. These components are draggable and as the user drags I save every Top position and left position to the database.

I use the loop below to display the components on my page and when loaded the components stack on one another.

     @foreach (var group in MyModel)
        {
            <div class="draggable position-absolute" id="@extgroup.AddId">
                <MyComponent
                    Id="@extgroup.AddId"
                    GroupDescription="@extgroup.Description"
                    TopPosition="@extgroup.TopPosition"
                    LeftPosition="@extgroup.LeftPosition">
                </MyComponent>
            </div>
        }

How can I display the components in the exact position they were saved since I have all the values for top position and left position?

Thanks.