문제 설명
중앙에 div를 만든 후 div를 만듭니다. (Make a div, after centered 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의 스타일이 있습니다.
.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);
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(‑50%, ‑50%) !important;
border‑radius: 5px !important;
color: white !important;
min‑width: 200px;
min‑height: 200px;
}
이 div 뒤에 새 div를 만들려고 하지만 항상 맨 위에 있습니다.
다음과 같습니다.
이를 어떻게 고칠 수 있나요?
참조 솔루션
방법 1:
You have assigned position: absolute for your first div element which resulted in the following div element to stay on top of it.
Solution: wrap both the div elements in a new div element and assign position: absolute to the new element. Try this.
<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>
CSS
.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;
}
(by Eugene Sukh、Aryan Twanju)