How to overlap component? - css

Question

I have the following angular component lets call it child-component
<div>
<a-component-tag></a-component-tag>
<router-outlet></router-outlet>
</div>
which is itself being rendered into another router-outlet like this
<div>
<top-component></top-component>
<router-outlet></router-outlet>
<div>
I would like the component that is rendered in the first router-outlet above to either render below a-component-tag or cover a-component-tag, depending on the user clicking a maximize, minimize button. It shouldn't cover anything but a-component-tag (i.e. it should not cover top-component).
This component is defined by
<div id="thiscomp" [ngclass]="max?cover:minimize">...</div>
I tried to define these two classes as
.cover{
position: absolute;
top: 0;
left: 0;
z-index:100;
}
.minimize {
margin-top:30px;
}
but the cover class is not working: Some of the subcomponents in the thiscomp div are rendered above some stay minimized.

Answer 1

You're trying to change the order in which two DOM elements appear -- there are better techniques than absolute positioning available for that.
The javascript in this example is just for demo; the work is being done in the 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>