CODEWITHSUNDEEP
cssangular
user35202
user35202

Reputation: 419

How to overlap component?

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.

Upvotes: 5

Views: 1585

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21485

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>

Upvotes: 2

Related Questions