我如何重疊 html<div> 在另一個之上<div>正確嗎？</div><div id="text_translate"><p> 我正在處理詳細信息頁面的 UI。 該頁面正在從動態更新內容的數據庫中獲取其內容。 到目前為止，用戶界面看起來像我鏈接的圖像</p><p><a href="https://i.stack.imgur.com/Fb4eD.png" rel="nofollow noreferrer">詳細信息頁面的當前 UI</a></p><p> 但是，當 div 的內容發生變化時，會導致圖像被覆蓋太多。</p><p> HTML 如下。</p><pre> &lt;ion-content &gt; &lt;ion-title *ngIf="item"&gt;{{item.title}}&lt;/ion-title&gt; &lt;div class="container"&gt; &lt;div class="content"&gt; &lt;div *ngFor ="let image of image" &gt; &lt;ion-row&gt; &lt;ion-col size="12" offset="0"&gt; &lt;img id ="image" [src]="image" alt="this is the image"/&gt; &lt;/ion-col&gt; &lt;/ion-row&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="overlay"&gt; &lt;ion-buttons slot="start"&gt; &lt;ion-back-button defaultHref="/tabs/tab4"&gt;&lt;/ion-back-button&gt; &lt;/ion-buttons&gt; &lt;h2&gt;{{item.title}}&lt;/h2&gt; &lt;p&gt;{{item.description}}&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;/ion-content&gt;</pre><p> CSS如下</p><pre>.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; }</pre><p> 如何在不覆蓋其下方圖像的情況下動態更新 div 的內容？ 有沒有一種方法可以將圖像推到頁面下方，因為覆蓋層由於更多的文本而變大？</p></div></div>

Question

我正在處理詳細信息頁面的 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 的內容？ 有沒有一種方法可以將圖像推到頁面下方，因為覆蓋層由於更多的文本而變大？

Answer 1

由於您使用的是 CSS 網格，因此您可以.overlay class 上的絕對定位。

使您的.container class 具有此附加屬性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 網格 - 只是讓您知道。