title: Overlapping absolute and/or relative positionned divs
body: <pre><code>    &lt;div id="headContainer"&gt;
  
          &lt;div id="blackBar"&gt;
              &lt;div class="content"&gt;
                  &lt;img src="../Images/logo.png" class="logo" alt="logo" /&gt;
                  &lt;div id="clientSettings"&gt;
                      &lt;div id="settingsContainer"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;asp:LinkButton ID="endSession" OnClick="endSession_Click" Text="Exit" runat="server" /&gt;&lt;/li&gt;
                              &lt;li&gt;not available&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="clientProfile"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $('#clientSettings').click(function () {
                      $('#settingsContainer').toggle();
                  });
              });
          &lt;/script&gt;
  
          &lt;div id="grayBar"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Alright, So as you might guess from above, I am trying to show <code>#settingsContainer</code> once <code>#clientSettings</code> has been clicked by using jQuery. I am able to achieve that with the <code>.toggle()</code> method. However, <code>#settingsContainer</code> needs to overlap <code>#grayBar</code>.</p>
  
  <p>Please see below the CSS:</p>
  
  <h1>headContainer:</h1>
  
  <pre><code>#headContainer 
  {
      top                 : 0;
      left                : 0;
      width               : 100%;
      height              : 100px;
      position            : fixed; &lt;- or relative doesn't matter.
      z-index             : 1;
  }
  
  #headContainer div#grayBar
  {
      top                 : 0;
      left                : 0;
      position            : relative; &lt;- or fixed doesn't matter.
      width               : 100%;
      height              : 50px;
      background-color    : #f1f1f1;
      z-index             : 1;
  }
  </code></pre>
  
  <h1>clientSettings + settingsContainer:</h1>
  
  <pre><code>#headContainer div#blackBar div#clientSettings
  {
      float               : left;
      position            : relative;
      width               : 25px;
      height              : 50px;
      background-image    : url('../Images/Icons/endSession.png');
      background-repeat   : no-repeat;
      background-position : center center;
  }
  
  #headContainer div#blackBar div#clientSettings:hover 
  {
      cursor              : pointer;
      background-color    : #636363;  
  }
  
  #headContainer div#blackBar div#clientSettings #settingsContainer
  {  
      position            : relative; &lt;- tried using absolute instead.
      top                 : 50px;
      left                : 0;
      padding             : 50px;
      background-color    : Green;
      z-index             : 99999; &lt;- doesn't really matter.
  }
  </code></pre>
  
  <p>I am trying to figure out a way to have <code>#settingsContainer</code> overlap its parents and everything else while keeping it as a child of <code>#clientSettings.</code></p>
  
  <p>Thank you.</p>