title: Position Div Relation To Body - Outside Of Parent Div
body: <p>I'm having trouble with popup divs. I want to be able to position popups relative to the body so that they are not centred. The problem I have is that they are nested within the navigation div and I can only position them relative to this as it has to be positioned absolutely as I want this to appear in the center of the screen.  </p>
  
  <p>So the two issues I have are:</p>
  
  <ul>
  <li>Can't position Div in relation to body.</li>
  <li>When divs appear they push the navigation items out of place.</li>
  </ul>
  
  <p>Solution:</p>
  
  <ul>
  <li>Find a way to make the divs ignore it's current parent div and position itself relevant to the body div.</li>
  </ul>
  
  <p>Below you can find my code in a jsFiddle and thank you in advance for your help.</p>
  
  <p><a href="http://jsfiddle.net/Uj3R7/5/" rel="nofollow">http://jsfiddle.net/Uj3R7/5/</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="menu"&gt;
  
      &lt;div id="name"&gt;&lt;a href="" title=""&gt;name&lt;/a&gt;&lt;/div&gt;
  
      &lt;ul id="nav"&gt;
  
          &lt;li&gt;&lt;a class="pop-up-link" href="#" title="about"&gt;about&lt;/a&gt;&amp;nbsp; | &amp;nbsp;
              &lt;div class='about'&gt;&lt;a href='#' title="close" class='close'&gt;&lt;img src='img/close.png' alt='close' height="20" width="20" /&gt;&lt;/a&gt;
                  &lt;p&gt;content&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a class="pop-up-link" href="#" title="press"&gt;press&lt;/a&gt;&amp;nbsp; | &amp;nbsp;
              &lt;div class='press'&gt;&lt;a href='#' title="close" class='close'&gt;&lt;img src='img/close.png' alt='close' height="20" width="20" /&gt;&lt;/a&gt;
                  &lt;p&gt;content&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a class="pop-up-link" href="#" title="diary"&gt;contact&lt;/a&gt;&amp;nbsp; | &amp;nbsp;
              &lt;div class='contact'&gt;&lt;a href='#' title="close" class='close'&gt;&lt;img src='img/close.png' alt='close' height="20" width="20" /&gt;&lt;/a&gt;
                  &lt;p&gt;content&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a class="pop-up-link" href="#" title="contact"&gt;diary&lt;/a&gt;
              &lt;div class='diary'&gt;&lt;a href='#' title="close" class='close'&gt;&lt;img src='img/close.png' alt='close' height="20" width="20" /&gt;&lt;/a&gt;
                  &lt;p&gt;content&lt;/p&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  #menu {
      position:fixed;
      overflow: visible;
      width: 400px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -100px;
      text-align: center;
  }
  
  #name {
      font-size: 26px;
      line-height: 50px;
      vertical-align: middle;
      border-bottom: 1px solid #000;
  }
  
  #nav li{
      font-size: 14px;
      width: 300px;
      line-height: 25px;
      vertical-align: middle;
      display: inline;
  }
  
  .close { 
      float: right; 
      position: relative; 
      z-index: 99999; 
      margin: 3px 6px 0; 
  }
  
  .about { 
      position: relative; 
      padding: 5px; 
      background: #F7E39A; 
      display:none; 
      width:500px; 
      margin: 0 auto; 
      min-height: 200px; }
  
  .press { 
      position: relative; 
      float: right; 
      top: -200px; 
      right: 500px; 
      padding: 5px; 
      background: #DEA1B7; 
      display:none; 
      width:250px; 
      min-height: 200px; 
  }
  
  .contact { 
      position: relative; 
      padding: 5px; 
      background: #6666FA; 
      display:none; 
      width:500px; 
      margin: 0 auto; 
      min-height: 200px; 
  }
  
  .diary { 
      position: relative; 
      float: left; 
      top: 0px; 
      padding: 5px; 
      background: none; 
      border: #291DFA 1px solid; 
      display:none; 
      width:100px; 
      min-height: 200px; 
  }​
  </code></pre>
  
  <h2>jQuery</h2>
  
  <pre><code>$(function() {
  
      var height = $(document).height();
      var width = $(document).width();
      var spanHeight = $('.popup').height();
      var spanWidth = 500;
  
      $('.pop-up-link').click(function() { 
  
          $(this).next() 
          .css({ "top" :  height/2 - spanHeight/2 }) // Centre Pop Up
          .css({ "left" : width/2 - spanWidth/2 })    
          .fadeIn(500);
      });
  
      $(".close").click(function () {
          $('.pop-up-link').next().fadeOut(500);
      });
  });​
  </code></pre>
  
  <h2>Solution</h2>
  
  <p>I reworked the code to allow the popups to be children of the body tag so that I could position them relative to the body. I am using SimpleModels and positioning the divs using percentages.</p>
  
  <pre><code>jQuery(function ($) {
      $('#menu .about').click(function (e) {
          $('#about-content').modal({position: ["20%","65%"]});
          return false;
      });
  });
  </code></pre>