title: Div with fixed position is always stacked on a second div
body: <p>In my <code>Index.cshtml</code> (ASP.Net Core MVC) I have the following code:</p>
  <pre><code>@{
      ViewData[&quot;Title&quot;] = &quot;Home Page&quot;;
  }
  
  &lt;div class=&quot;text_center&quot;&gt;
  
  
      &lt;div id=&quot;header_parent&quot;&gt;
              RESUME INFORMATION
      &lt;/div&gt;
  
      &lt;div class=&quot;container containerClass&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
  
              &lt;div class=&quot;col-md-6 green-box&quot;&gt;
                  &lt;div class=&quot;personal&quot;&gt;
  
                      &lt;fieldset&gt;
                          &lt;legend class=&quot;personal-information&quot;&gt;Personal Information&lt;/legend&gt;
  
                          &lt;div class=&quot;personal-name&quot;&gt;Name: Daniel Kamel&lt;/div&gt;
                          &lt;div class=&quot;personal-email&quot;&gt;Email: kameldaniel@hotmail.com&lt;/div&gt;
                          &lt;div class=&quot;personal-address&quot;&gt;address: Zouk Mickael&lt;/div&gt;
  
                      &lt;/fieldset&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;col-md-6 red-box&quot;&gt;
                  &lt;div class=&quot;education&quot;&gt;
                      &lt;fieldset&gt;
                          &lt;legend class=&quot;education-education&quot;&gt;Education&lt;/legend&gt;
  
                          &lt;label class=&quot;education-college&quot;&gt;ESIB from 2015 to 2020&lt;/label&gt;
                      &lt;/fieldset&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  </code></pre>
  <p>My <code>site.css</code> file contains the following snippet:</p>
  <pre><code>#header_parent {
      position: fixed;
      background-color:aqua;
      margin-left: 0px;
      margin-right: 0px;
      height:50px;
      margin-top: 0px;
  }
  
  .containerClass{
      margin-top: 100px;
  }
  
  .green-box{
      background-color: green;
  }
  
  .red-box{
      background-color: red;
  }
  
  .personal-information {
      font-size:35px;
      color:blue;
  }
  
  .education-education{
      font-size:35px;
      color:blue;
  }
  
  .personal-name{
      font-size: 20px;
  }
  
  .personal-email {
      font-size: 20px;
  }
  
  .personal-address {
      font-size: 20px;
  }
  
  .education-college {
      font-size: 20px;
  }
  </code></pre>
  <p>This is a screenshot of the result:
  <a href="https://i.stack.imgur.com/fKTbE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fKTbE.png" alt="enter image description here" /></a></p>
  <p>The div with <code>id=&quot;header_parent&quot;</code> is stacked behind the div under it whose class is <code>class=&quot;container containerClass&quot;</code> and I know that because if I inspect my code on the browser I can see it:</p>
  <p><a href="https://i.stack.imgur.com/08SJg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/08SJg.png" alt="enter image description here" /></a>
  However if I remove <code>position:fixed</code> from my css file the <code>header_parent</code> <code>div</code> appears at the top of my page which is how I want it to appear however I also want it to have its position fixed, can anyone explain to me why is it producing the above result when I add <code>position:fixed</code> in the css file and how to fix it?</p>