title: How to make a fixed div inside iframe
body: <p>I want to make a float div at bottom of the window. It is working fine as displayed here <a href="https://fiddle.jshell.net/8ghsm1La/light/" rel="nofollow noreferrer">https://fiddle.jshell.net/8ghsm1La/light/</a> </p>
  
  <p><img src="https://i.stack.imgur.com/EN53o.png" alt="enter image description here"></p>
  
  <p>The issue I am getting is when I place that html inside iframe. The sticky div is coming at bottom of iframe. In this case I want that to be at the bottom of my screen irrespective of where the iframe scroll is
  <a href="https://jsfiddle.net/x1p4bf7j/" rel="nofollow noreferrer">https://jsfiddle.net/x1p4bf7j/</a></p>
  
  <pre><code>&lt;iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/" style="width: 1310px; height: 582px; overflow: hidden;" /&gt;
  </code></pre>
  
  <p>i.e I want fixed sticky div to be positioned at the bottom of container page.</p>
  
  <p><img src="https://i.stack.imgur.com/akyub.png" alt="enter image description here"> </p>