title: How can I set an element over Twitter's Bootstrap modal?
body: <p>This is my base HTML for the Twitter's Bootstrap modal:</p>
  
  <pre><code>&lt;div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"&gt;
      &lt;form class="form-horizontal updater" data-type="undefined" data-id="undefined"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h3 id="modalLabel"&gt;Edit Content&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;&lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-primary"&gt;
                  &lt;strong&gt;Save Changes&lt;/strong&gt;
              &lt;/button&gt;
              &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As my Firebug says, the <code>modal</code> class has: <code>z-index: 1050</code>. I was trying to add an element like this:</p>
  
  <pre><code>&lt;div class="width: 1000px height: 200px; background: #f00; z-index: 9999;"&gt;hi there&lt;/div&gt;
  </code></pre>
  
  <p>Into the:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But it doesn't work.</p>
  
  <p>So, how can I set an element over all these Bootstrap components?</p>