title: Displaying an element outside overflow hidden container
body: <p>I have a <code>&lt;table&gt;</code> which is made scrollable by wrapping it in a <code>&lt;div&gt;</code> of fixed height.</p>
  
  <p>This <code>&lt;table&gt;</code> has a dropdown component (<em>blue container in <code>2nd</code> column of <code>1st</code> row in the image and jsfiddle given below</em>) which is hiding behind the container <code>&lt;div&gt;</code>. I want it to display all the options Instead.</p>
  
  <p><img src="https://i.stack.imgur.com/d36jT.png" alt="current output"></p>
  
  <p><a href="http://jsfiddle.net/venkateshwar/n8TpR/12/" rel="noreferrer"><strong>JSFIDDLE</strong></a>  (<em>example</em>)</p>
  
  <p>How should I bring the dropdown component outside the container <code>&lt;div&gt;</code> to display all the options as in the image below? </p>
  
  <p><img src="https://i.stack.imgur.com/2j0XD.png" alt="desired output"></p>
  
  <p>If I remove the <code>pRelative</code> container, then the dropdown is fully visible - But when I scroll, the dropdown  does not scroll along with it's container.</p>
  
  <p>Thanks in advance.</p>
  
  <p>PS: Looking for CSS/javascript solution only.</p>