title: CSS overlaying centered text with fixed div, links not working
body: <p>Attempting to make links work when pressing a fixed div to lower onto another. </p>
  
  <p>The main bar, illustrated in pink holds the links, and when using the usual methods to overlay a div containing the text onto the bar it stops the links from working due to the full width container div holding the text.</p>
  
  <p>I would like to know if there is a possible route to getting the desired result?!</p>
  
  <p>Heres the <a href="http://jsfiddle.net/bluey/8upUx/" rel="nofollow">jsFiddle</a> </p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div class='text-wrapper'&gt;
      &lt;div class='text_in_middle'&gt;
          some text
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;div class='bar'&gt;
          &amp;nbsp;
          &lt;a href='' &gt;Link 1&lt;/a&gt; -
          &lt;a href='' &gt;Link 2&lt;/a&gt; -
          &lt;a href='' &gt;Link 3&lt;/a&gt; 
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code> .text_in_middle {
      text-align: center;
  }
  .bar {
      z-index: 500;
      position: fixed;
      top: 0;
      min-width: 100%;
      background-color: pink;
  }
  .text-wrapper {
      width: 100%;
      position: fixed;
      top: 0px;
      z-index: 2500;
  }
  </code></pre>