如何正确重叠 html <div> <div> 和另一个？

Question

我正在处理一个详细信息页面的UI。页面从数据库中获取内容，数据库动态更新内容。到目前为止，UI看起来像我链接的图像

详细信息页面的当前UI

然而，当div的内容发生变化时，会导致图像被覆盖过多。

HTML如下所示。

<ion-content >
<ion-title *ngIf="item">{{item.title}}</ion-title>
<div class="container">
<div class="content">
<div *ngFor ="let image of image" >
<ion-row>
<ion-col size="12" offset="0">
<img  id ="image" [src]="image" alt="this is the image"/>
</ion-col>  
</ion-row>
</div>
</div>
<div class="overlay">
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
</ion-buttons>
<h2>{{item.title}}</h2>
<p>{{item.description}}</p></div>
</div>
</ion-content>

CSS如下

.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
.content {
margin-top: 20px;
}
.overlay {
width: 100%;
border-radius:  0px 0px 30px 30px; 
background-color: #ffffff;
opacity: 1;
position: absolute;
}  

如何在不覆盖div下面的图像的情况下动态更新div的内容？有没有一种方法可以让我将图像进一步向下推到页面上，因为更多的文本会使覆盖变得更大？

Answer 1

由于您使用CSS网格，因此可以取消.overlay类上的绝对定位。

使您的.container类具有此附加属性grid-template-rows: max-content minmax(0, 1fr);

然后，您可以像现在这样将.overlay放在网格的第一行，然后将.content放在第二行，使它们堆叠。在.overlay上放置margin-bottom: "however much you want it to overlap。这将使它们稍微重叠，同时也会随着.overlay中内容的增长而向下推图像。如果最终在源顺序中将.overlay放在.content之前，则需要将position: relative;添加到.overlay以使其显示在图像上方。所以基本上你的3个类应该是这样的——

.container {
display: grid;
grid-template-rows: max-content minmax(0, 1fr);
}
.content {
grid-row: 2 / 3;
}
.overlay {
width: 100%;
grid-row: 1 / 2;
border-radius:  0px 0px 30px 30px; 
background-color: #ffffff;
opacity: 1;
margin-bottom: -10px;
}

您基本上是将两个容器设置在各自的行中，不重叠，然后使用负边距将图像拉到消息下方。不要忘记，如果您最终更改了HTML顺序，并将.overlay放在.content之上，则需要给它一个position: relative;，以便它将显示在.content之上。这为覆盖创建了一个新的堆叠上下文，有效地始终将其置于图片上方。如果您最终按照源代码顺序将.overlay放在.content之上，那么您将不需要使用CSS网格——只是为了让您知道。