title: How to prevent component from overlapping content?
body: <p>I have created an angular component called <strong>toolbar</strong> and applied the following CSS to it.</p>
  
  <pre><code>position: fixed;
  z-index: 999;
  height: 100px;
  </code></pre>
  
  <p>I used position to fix my toolbar to the page whenever I scroll the page. I used z-index to display the toolbar over all other elements on the page.</p>
  
  <p>This makes up for an individual element that I used in the app.component.html. </p>
  
  <p>My problem is, when creating a page using a new component, if I navigate to said page, the <strong>'newcomponent works!'</strong> does not show up because the toolbar overlaps it.</p>
  
  <p>I wish to make my toolbar fixed in a way that if I had any new element, whatever element I display, it appears right under the toolbar instead of underneath it.</p>
  
  <p>Thanks for your help!</p>