How to overlap a component?

Question

I have the following angular component that lets you call it a child component

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

which itself is transmitted to another router-exit similar to this

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

I would like the component displayed in the first upstream router to either display below the component tag or close the component tag, depending on the user who clicked the maximize button. It should not cover anything except the component tag (i.e., It should not cover the top component).

This component is defined

 <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 does not work: some of the subcomponents in this comp div are displayed above some minimum.

Answer 1

You are trying to change the order in which two DOM elements appear - more advanced methods are available for this than absolute positioning.

javascript in this example is for demonstration purposes only; the work is done in 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>