Question

我有以下角度组件，可以将其称为子组件

<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>

如何重叠组件？

1 个答案: