Html 在居中div之后进行div

我有一个div，在另一个div中居中

这是代码

<div class="form-group col-md-7 base-auth-form" style="text-align: center;margin-top: 30px;">
                <h5 style="margin-top: 30px;font-size: 20px;">{{'ChooseSubscription' | localize}}</h5>
                <div style="height:80%">
                    <mat-tab-group mat-align-tabs="center">
                        <mat-tab label="MONTLY" style="color: white !important">
                            <div class="row" style="margin-left: 20px; margin-right: 20px;">
                                <div *ngFor="let item of subscriptions" class="col-4">
                                    <div class="card" style="border-radius: 7px;height: 425px;">
                                        <h4 class="header-subsc-card"><b>{{item.name}}</b></h4>
                                        <h5 class="header-subsc-card">{{item.description}}</h5>
                                        <h4 class="header-subsc-card" style="margin-top: 30px;"><b
                                                style="font-size: 24px;">£
                                                {{item.priceMonthly}}</b> /
                                            {{'month' | localize}}</h4>
                                        <button
                                            class="btn-rent-default subscribe-button ">{{'Subscribe' | localize}}</button>

                                        <mat-list>
                                            <mat-list-item *ngFor="let option of item.pm101SubscriptionOptions"
                                                role="listitem">
                                                <mat-icon mat-list-icon class="green-icon">check</mat-icon>
                                                {{option.value}} {{option.name}}
                                            </mat-list-item>
                                        </mat-list>
                                    </div>
                                </div>
                            </div>
                        </mat-tab>
                        <mat-tab label="YEARLY" style="color: white !important">
                            <div class="row" style="margin-left: 20px; margin-right: 20px;">
                                <div *ngFor="let item of subscriptions" class="col-4">
                                    <div class="card" style="border-radius: 7px;height: 425px;">
                                        <h4 class="header-subsc-card"><b>{{item.name}}</b></h4>
                                        <h5 class="header-subsc-card">{{item.description}}</h5>
                                        <h4 class="header-subsc-card" style="margin-top: 30px;"><b
                                                style="font-size: 24px;">£
                                                {{item.priceYearly}}</b> /
                                            {{'month' | localize}}</h4>
                                        <button
                                            class="btn-rent-default subscribe-button ">{{'Subscribe' | localize}}</button>

                                        <mat-list>
                                            <mat-list-item *ngFor="let option of item.pm101SubscriptionOptions"
                                                role="listitem">
                                                <mat-icon mat-list-icon class="green-icon">check</mat-icon>
                                                {{option.value}} {{option.name}}
                                            </mat-list-item>
                                        </mat-list>
                                    </div>
                                </div>
                            </div>
                        </mat-tab>
                    </mat-tab-group>
                </div>
                <div style="width:100%;height:20% ;margin-top:30px;">
                    <button class="btn-rent-default-transparent back-button">{{'Back' | localize}}</button>
                </div>
            </div>

}

我试着在这部片子之后再制作一部新的片子，但它总是在最上面

下面是它的样子

我怎样才能解决这个问题

---

您已为第一个

div

元素指定了

位置：绝对
，这导致以下
div
元素位于其顶部

解决方案：将两个
div
元素包装在一个新的
div
元素中，并将
position:absolute
分配给新元素。试试这个

<div class="wrapdiv">
    <div class="form-group col-md-7 base-auth-form" style="text-align: center;margin-top: 30px;">
        your content here
    </div>
    <div>
        this is the new element you want to stay below
    </div>
</div>

<div class="wrapdiv">
    <div class="form-group col-md-7 base-auth-form" style="text-align: center;margin-top: 30px;">
        your content here
    </div>
    <div>
        this is the new element you want to stay below
    </div>
</div>

.wrapdiv {
  position: absolute !important;
}
.base-auth-form {
  box-shadow: 0 0 22px 0 rgba(25, 35, 62, 0.19), 0 2px 16px 0 rgba(25, 35, 62, 0.13) !important;
  background: linear-gradient(161deg, #364972, #19233e 90%), linear-gradient(to bottom, #ffffff, #ffffff);
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 5px !important;
  color: white !important;
  min-width: 200px;
  min-height: 200px;
}