title: How to Overlap Components in Angular 5
body: <p>I'm just starting out with Angular, and I'm working on creating a sample site.</p>
  
  <p>So basically I've got a cover page component called <code>&lt;app-coverpage&gt;</code> and I've got all the other components I want to add that I want to be overlapping the coverpage as its supposed to be like a background.</p>
  
  <p>I've added the components into my <code>app.component.html</code> file and when I have them in the following order:</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-coverpage&gt;&lt;/app-coverpage&gt;
  </code></pre>
  
  <p>what I see is something like this </p>
  
  <p><a href="https://i.stack.imgur.com/SqzDh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SqzDh.png" alt="this"></a></p>
  
  <p>what I want is for the black <code>app-coverpage</code> component to be the 'background' for everything else. </p>
  
  <p>Can anyone help me with this please?</p>
  
  <p>On a side note. I noticed that I can't add this component to the <code>index.html</code> file. Meaning it doesn't render on my browser when I add it in the following way:</p>
  
  <pre><code>&lt;app-root&gt;&lt;/app-root&gt;
  &lt;app-coverpage&gt;&lt;/app-coverpage&gt;
  </code></pre>
  
  <p>Can anyone please explain this to me too?</p>
  
  <p>Thanks in advance for your help on both queries!</p>