title: Make div fixed on page scroll in angular
body: <p>I currently have a screen layout like this</p>
  
  <p><a href="https://i.stack.imgur.com/70DeL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/70DeL.png" alt="enter image description here"></a></p>
  
  <p>I have to render componene 2 inside component 3 in below way</p>
  
  <p><a href="https://i.stack.imgur.com/gD9zF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gD9zF.png" alt="enter image description here"></a></p>
  
  <p>Due to certain restrictions i cannot put angular component 3 inside angular component 2</p>
  
  <p>so what i have done is to use css to achieve the desired effect</p>
  
  <pre><code>.component3 {
      position: relative;
   z-index: 1
  }
  
  .component2 {
     position: absolute;
    margin-left: calc(100% - 169px);
    margin-top: 13px;
    z-index: 2;
  }
  </code></pre>
  
  <p>I have achieved the desired output
  however
  once user scrolls page the component 2 keeps showing on page. It is not supposed to scroll</p>
  
  <p>what can i do for it ?</p>