如何重叠html<；部门>；另一个<；部门>；正确地

我正在处理详细信息页面的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>

---

如何在不覆盖div下面的图像的情况下动态更新div的内容？有没有一种方法，我可以推动图像进一步向下的页面，因为覆盖越来越大，由于更多的文字

因为您使用的是CSS网格，所以可以取消

.overlay

类上的绝对定位

使您的

.container

类具有此附加属性

网格模板行：max content minmax（0，1fr）

然后，您可以像以前一样将
.overlay
放在网格的第一行，然后将
.content
放在第二行，以便它们堆叠起来。在
.overlay
上放置
页边距底部：“无论您希望重叠多少
。这将使它们略微重叠，同时随着
.overlay
中内容的增长，也会向下推图像。如果在源代码顺序中将
.overlay
放在
.content
之前，则需要添加
位置：相对
至
。覆盖
，使其显示在图像上方。所以基本上你的3个类应该看起来像这样--


.container{
显示：网格；
网格模板行：最大内容最小最大值（0，1fr）；
}
.内容{
网格行：2/3；
}
.覆盖{
宽度：100%；
网格行：1/2；
边界半径：0px 0px 30px 30px；
背景色：#ffffff；
不透明度：1；
边缘底部：-10px；
}
您的
class=“overlay”
div是绝对定位的，因此它不会影响其他DOM元素的位置（即向下推图像），因为它超出了文档流。也许一个简单的解决方案是给你的
.overlay
一个半透明的背景-
背景：rgba（255，255，255，0.5）而不是
#ffffff
.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;

 }