title: css for modal - how to position it above page yet scrollable in window
body: <p>Here is the html:</p>
  
  <pre><code>&lt;body&gt;
   &lt;div class="ngdialog"&gt;
     &lt;div class="ngdialog-overlay&gt;&lt;/div&gt;
     &lt;div class="ngdialog-content&gt;
        ...modal content
     &lt;/div.
   &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>The ngdialog div is, as you can guess, an modal (z-index: 10000).
  My goal is, by applying some comination of styles (position, float etc.) to the elements to make it so that:</p>
  
  <p>a) When the modal is displayed, have the overlay (grey and opacity; 0.5) cover all other elements in the page.</p>
  
  <p>b) If the modal content is longer than the page, I would like the user to be able to use the main scroll bar to see the bottom/top of the modal. In other words, if the rest of the page is only 100px but the modal is 200px, I would like the scoll bar to allow the user to scroll that extra 100px.</p>
  
  <p>The issue I am having is that when I position ngdialog as absolute, the window won't allow me to scroll to see the rest of the modal (as the absolute element is no longer in the standard element flow). </p>
  
  <p>If I try to use fixed positioning, there is no scroll bar. If I use relative positioning, the other page elements (which the overlay is above) get moved around. </p>
  
  <p>I have tried (what feels like) every combination of absolute, relative, fixed, static, float on all of these elements and I can't get the behavior I am seeking. </p>
  
  <p>Keep in mind that body is position: relative (this can be changed if need be).</p>
  
  <p>Thanks in advance, appreciate all comments.</p>
  
  <p>Edit: Sorry, I had to go to sleep there, here is a fiddle:</p>
  
  <p><a href="https://jsfiddle.net/vpgoy756/1/" rel="nofollow">https://jsfiddle.net/vpgoy756/1/</a></p>