如何避免Angular中的元素重叠元素答案

【问题标题】：How to avoid elements overlapping elements in Angular如何避免Angular中的元素重叠元素
【发布时间】：2020-01-24 08:04:54
【问题描述】：

我的应用是基于 Angular 的，我用表格行动态填充页面。页面下方有一个应用程序控制台，该元素的位置似乎是固定的。当我单击按钮添加新行时，新行与应用程序控制台重叠。如何避免这种情况。

下面是图片和代码sn-p。

**app.component.html**
<div>
  <button style="width:100px;" class="btn" (click)="addProduct()" >Add 
   Product</button>
.... other elements needed for table row ....
</div>
 <br>
<app-console [consoleMessages]="consoleMessages"></app-console>

**app.component.ts**


addProduct () {
    let product = JSON.parse(JSON.stringify(this.productTemplate));
    this.record['products'].push(product);//dynamically adds table row 
  }

Angular支持动态添加元素，如何避免元素重叠？

关于这个问题的更新：

console.component.html

<mat-tab-group class="console">
  <mat-tab class="tab" label="Console">
    <pre style="height:200px;"><code [innerHtml]="htmlCode"></code></pre>
  </mat-tab>
</mat-tab-group>

console.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { highlightAuto } from 'highlight.js';
@Component({
  selector: 'app-console',
  templateUrl: './console.component.html',
  styleUrls: ['./console.component.css']
})
export class ConsoleComponent implements OnInit {

  @Input() consoleMessages = '';
  consoleHtmlMessages = '';

  constructor() { }

  ngOnInit() {
  }


  get htmlCode() {
    return highlightAuto(this.consoleMessages, ['html']).value;
  }

}

【问题讨论】：

尝试使用position 和z-index 并在stackblitz.com/edit/angular 中设置相关代码并发布链接
能否也添加预期的行为？
预期行为：添加新表格行时，app-console 会自动下移
我已经更新了问题，我已经添加了什么是 app-console

标签： javascript html css angular

【解决方案1】：

/* reset the html and body */
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.list, .console {
  box-sizing: border-box;
  padding: 0 1em;
  /* this scroll will keep both areas always visible */
  overflow: auto;
}

.list {
  background: #ccedff;
  flex-grow: 1;
}

.console {
  background: #eeefef;
  /* define a minumum size to your console */
  min-height: 200px;
}

<div class="container">
  <div class="list">
    <!--- // your list component... -->
  </div>
  <div class="console">
    <!--- // your console component... -->
  </div>
</div>

Obs：这里的 sn-p 似乎无法正确渲染，因此您可以在下面看到一个实时示例。

Live example

【讨论】：