title: Div position fixed causes scrollbar to get hidden behind it
body: <p>I have a div in my webpage which I've positioned fixed -</p>
  
  <pre><code>&lt;div class="dropdown-options" style="display: none; height: 61px; position: fixed; left: 18%; width: 500px; top: 50px; background-color: #f7f7f7; z-index: 1; width: 100%;" id="dropdown"&gt;
      &lt;table class="navigation nav-collapse" style="height: 61px;"&gt;
          ...
          ...
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The style - <code>left: 0;</code> has been applied because there is a sidebar to the left occupying 18% width of the page.</p>
  
  <p>I want the div to take the full width of it's parent, so the width is set to 100%.
  The problem is - This div hides the scrollbar behind it whenever it is displayed ( via JS ). 
  Here are the screenshots of the problem -</p>
  
  <p>When the div is not shown -
  <img src="https://i.imgur.com/vDSp3tZ.png" alt="When the div is not shown"></p>
  
  <p>When the div is shown -
  <img src="https://i.imgur.com/MavEiSi.png" alt="When the div is shown"></p>
  
  <p>How can I show it such that the scroll bar doesn't get hidden ?</p>