0
votes

I've created an application with two different components:

  • a main component (the parent, that is a general view) and
  • a nested component(the child, that is a registration form).

From the beginning, the child component (as a tag) is present inside the parent's template but with display:none. Clicking on a button the display value changes to inline and the child component appears and covers a part of the parent component that instead changes its opacity value. This works fine.

Is this the correct way to manage these two components in order to have this effect? Is there a way to create and remove a nested component without put it inside the parent's template with display:none from the beginning? I have these questions because I must add other components to link to other buttons; in this way I would have several nested components inside the principal view but I don't know if this is a good way to do it.

1
Just to be clear: the child component lives inside of the parent component but is invisible until a button pressed inside of the parent makes the child visible. Is that correct? - Makoto
Yes, it is correct. - dstyle

1 Answers

0
votes

set the z-index value of the component which should appear above higher than the one which should appear below Check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index