Как правильно наложить HTML <div>на другой <div>?

Question

Я работаю над интерфейсом страницы с подробностями. Страница получает свое содержимое из базы данных, которая обновляет содержимое динамически. Пока что пользовательский интерфейс выглядит как изображение, которое я связал

Текущий пользовательский интерфейс страницы сведений

Однако, когда содержимое 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.

Сделайте так, чтобы у вашего класса .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-сетки - просто, чтобы вы знали.