title: Absolute position and overflow hidden in CSS
body: <p>I have set <code>overflow:hidden</code> for a container. I want to set absolute position for an element which is inside the container so that it is displayed outside the container, however overflow hidden is not letting it display. </p>
  
  <p>It is important for me to use the <code>overflow:hidden</code> for the container, as I have lots of elements in the container. Is there anyway to make it work with the <code>overflow:hidden</code>?</p>
  
  <p>The parent element of the <code>wrap</code> is the <code>body</code> tag and its hard to decide position according to that.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="box"&gt;
          &lt;span&gt;Left&lt;/span&gt;
          &lt;div class="main"&gt;&lt;/div&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      width: 500px;
      margin: 50px auto;
      border: 1px solid green;
      overflow: hidden;    /*causes the problem */
  }
  
  .box{
      position: relative
  }
  
  .main{
      width: 100px;
      height: 100px;
      background: green;
  }
  
  span{
      position: absolute;
      left: -50px;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/c55hS/" rel="noreferrer">http://jsfiddle.net/c55hS/</a></p>