title: Bootstrap modal pushing content up
body: <p>I have been working with the bootstrap modal for the past few hours and I'm having some trouble. I searched all over the place, but couldn't find anyone with a similar issue.</p>
  
  <p>My modal looks like this</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&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" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  ...
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything else works, and the modal itself works, but whenever I click the button the containing div just ignores it's margin-top and goes to the top of the page. I'm hoping it is something stupid that I've done. </p>
  
  <p>Edit: Here is the CSS I'm using for this page. I forgot to mention that the modal above is on a page with datatables, which together are an iframe for another page. After I click to open the modal, the div that is containing the iframe goes to the top of the page as well.</p>
  
  <pre><code>.container{
    position: relative;
    top: 10px;
    height: 100%;
  }
  
  a, a:hover {
    color: #6a6e4d;
    text-decoration: none;
    font-weight: bold;
  }
  
  .pagination&gt;.active&gt;a, .pagination&gt;.active&gt;span, .pagination&gt;.active&gt;a:hover,
  .pagination&gt;.active&gt;span:hover, .pagination&gt;.active&gt;a:focus,
  .pagination&gt;.active&gt;span:focus {
    background-color: #6a6e4d;
    border-color: #6a6e4d;
  }
  </code></pre>