如何重叠组件？

Question

我有以下角度组件，我们称之为 child-component

<div>
       <a-component-tag></a-component-tag>
       <router-outlet></router-outlet> 
</div>

它本身正在被渲染到另一个这样的路由器插座中

<div>
<top-component></top-component>
<router-outlet></router-outlet>
<div>

我希望在上面的第一个路由器插座中呈现的组件在 a-component-tag 下方呈现或覆盖 a-component-tag，具体取决于在用户单击最大化、最小化按钮时。它不应该覆盖除 a-component-tag 之外的任何东西（即它不应该覆盖 top-component）。

这个组件是由

定义的

<div id="thiscomp" [ngclass]="max?cover:minimize">...</div>

我试图将这两个类定义为

.cover{
  position: absolute;
  top: 0;
  left: 0;
  z-index:100;
}

.minimize {
   margin-top:30px;
}

但是封面类不起作用：thiscomp div 中的一些子组件呈现在一些保持最小化的上方。

Answer 1

您正在尝试更改两个 DOM 元素出现的顺序 - 有比绝对定位更好的技术可用于此。

本例中的javascript仅用于演示；这项工作正在 CSS 中完成：

document.getElementById("example").onclick = function() {
  document.getElementById("container").classList.toggle('flip');
}

#container {display: flex; flex-direction:column}

#container.flip {flex-direction: column-reverse}

<div id="container">
  <div class="componentA">Component A</div>
  <div class="componentB">Component B</div>
</div>

<button id="example">Toggle</button>