title: Div with fixed position in a scrollable modal
body: <p>I have a div in a modal with scroll that should have fixed position relative to the browser window, and should not scroll away with the modal.</p>
  
  <p>I tried <code>position:fixed</code>, but it doesn't work. Here you can see issue in it's context:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.launchConfirm').on('click', function (e) {
      $('#confirm').modal({
          show: true
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="page-container"&gt;
      &lt;div class="container"&gt;
          &lt;br /&gt;
          &lt;button type="button" class="btn launchConfirm"&gt;Open modal&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal fade" id="confirm"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                   &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
                  &lt;div style="position:fixed;top:40px;left:10px;background-color:red"&gt;This div should be fixed&lt;br&gt;and should not scroll away.&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  some random buttons
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How could I fix that div?</p>