title: Make fixed element obey overflow:hidden
body: <p>Actually can't quite believe I can't solve this!</p>
  
  <p>How can I get a fixed element to obey the <code>overflow</code> setting?</p>
  
  <p>I have done a fiddle - <a href="http://jsfiddle.net/REk4C/7/" rel="nofollow noreferrer">http://jsfiddle.net/REk4C/7/</a></p>
  
  <p><img src="https://i.stack.imgur.com/wILIy.png" alt="enter image description here"></p>
  
  <p>In the fiddle and the above image, you'll see a <code>div</code> that contains three <code>div</code>s, each have a different <code>position</code> setting. The <code>relative</code> element obeys the overflow. Now I would expect and can accept that the <code>absolute</code> element to break out, but I need the fixed element to obey the <code>overflow</code> is this possible?</p>
  
  <p>Happy to use jQuery if needed.</p>