title: Prevent NavBar from Expanding When Using Z-Index
body: <p>I posted a previous question concerning <a href="https://stackoverflow.com/questions/64860232/positioning-navbar-at-top-of-page-but-losing-clickability-on-main-content/64860753#64860753">Positioning NavBar at Top of Page but Losing Clickability on Main Content</a>. The question was answered but it has now led to an unintended consequence. At first it prevented a dropdown menu item from appearing above the content. I updated the dropdown with a <code>z-index: 99999; position: relative;</code> value to get it to display above the content but now it expands the height of the Header section. Here are 3 images.</p>
  <p>Unselected Dropdown:</p>
  <p><a href="https://i.stack.imgur.com/tMLxc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMLxc.png" alt="UnSelected Dropdown" /></a></p>
  <p>How it used to appear:</p>
  <p><a href="https://i.stack.imgur.com/N3kTa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N3kTa.png" alt="How it used to appear" /></a></p>
  <p>How it now appears using <code>z-index: 99999;position: relative;</code></p>
  <p><a href="https://i.stack.imgur.com/zC1T1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zC1T1.png" alt="enter image description here" /></a></p>
  <p>Here is the code for the navbar:</p>
  <pre><code>&lt;header&gt;
      &lt;div class=&quot;navbar navbar-inverse&quot; id=&quot;edadTopNavigation&quot;&gt;
          &lt;div class=&quot;container-fluid app-navbar&quot;&gt;
              &lt;div class=&quot;navbar-collapse collapse app-navbar-text-section&quot;&gt;
                  &lt;ul class=&quot;nav navbar-nav&quot;&gt;
                      &lt;li class=&quot;nav-item dropdown&quot;&gt;
                          &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Home&quot; asp-action=&quot;Index&quot;&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item dropdown&quot;&gt;
                          &lt;a class=&quot;nav-link dropdown-toggle&quot; id=&quot;adminDropdownMenuLink&quot; href='#' data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;&lt;div class=&quot;fa fa-cog&quot;&gt;&lt;/div&gt; Admin&lt;/a&gt;
                          &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;adminDropdownMenuLink&quot;&gt;
                              &lt;div&gt;
                                  &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;Acronym&quot; asp-action=&quot;Index&quot;&gt;Acronyms&lt;/a&gt;
                              &lt;/div&gt;                      
                              &lt;div&gt;
                                  &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;User&quot; asp-action=&quot;Index&quot;&gt;Users&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;User&quot; asp-action=&quot;Index&quot;&gt;States&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;&quot; asp-controller=&quot;User&quot; asp-action=&quot;Index&quot;&gt;Countries&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;                    
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  <p>Here is the current CSS:</p>
  <pre><code>.navbar {
      /* margin-bottom: 0px;*/
      position: fixed; /* Set the navbar to fixed position */
      top: 0; /* Position the navbar at the top of the page */
      width: 100%;
      overflow: hidden;
      z-index: 200
  }
      
  .dropdown-menu {
      padding: 10px;
      background-color: #fff;
      background-color: #fffff2;
      z-index: 99999;
      position: relative;
  }
  </code></pre>
  <p>What can I do to get the dropdown to display like image 2 instead of image 3?</p>