title: Position absolute not working when used inside table cell
body: <p>I have a container which has <code>position: relative</code> and <code>overflow: hidden</code> </p>
  
  <p>There's one table inside it and out of its many rows where I have placed a <b>span </b> which is absolutely positioned and the left of the span is given to something which is more than the width of the container.</p>
  
  <pre><code>     &lt;div&gt;
          &lt;table border="1"&gt;
              &lt;tr&gt;
                 &lt;td&gt;&lt;span&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for this is:</p>
  
  <pre><code>       div{
              position: relative;
              width: 300px;
              height: 300px;
              border: 2px solid red;
              overflow: hidden;
          }
          span{
              position: absolute;
              left: 380px;
              width: 30px;
              height: 30px;
              border: 1px solid green;
          }
          table{
              border-collapse: collapse;
          }
          tr{
              width: 150px;
              height: 20px;
          }
          td{
              padding: 5px;
  
              width: 100%;
          }
  </code></pre>
  
  <p>When the span is simply placed inside a <b>div</b>, and although the overflow to the div is hidden, the span is still showing up.</p>
  
  <p>But as soon as I place a table inside the div and then place this span inside one of the td's, it stops working.</p>
  
  <p>Any help will be appreciated.</p>
  
  <p>Code for Div that is working fine: </p>
  
  <pre><code>   &lt;div&gt; 
         &lt;span&gt;&lt;/span&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Rest of the CSS remains as it is.</p>
  
  <p>PS: </p>
  
  <ol>
  <li>I need to use the table in any case.</li>
  <li>If you want to see the demo of the div that is working, please see that in your local because that fiddle has table inbuilt, hence the code wont work there.</li>
  </ol>
  
  <p>I've created a demo <a href="http://jsfiddle.net/n7tekv7L/" rel="nofollow noreferrer">fiddle</a> for this.</p>