title: CSS show site part inside some 'frame'
body: <p>I try to apply some visual changes (different background or text color, some animations) to content that is visible through frame that is smartphone screen </p>
  
  <p><a href="https://i.stack.imgur.com/FTCdM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FTCdM.png" alt="enter image description here"></a></p>
  
  <p>I decided to make it such way:</p>
  
  <ol>
  <li>Place simple site without effects on the bottom layer</li>
  <li>Place copy of site with changes upper with <code>position: absolute</code> and hide it everywhere but rectangular block in the bottom of the page that is smartphone screen.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/BYYSI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BYYSI.png" alt="enter image description here"></a></p>
  
  <p>I tried to use simple <code>overflow: hidden</code> but it doesn't work because to use it I must place site with effects inside this small frame and set postition to absolute. But this frame is absolutely positioned too! So I can't stretch my invisible layer above simple visible site.</p>
  
  <p>Maybe someone has solution or maybe such things should be done other way?</p>
  
  <pre><code>&lt;div class="page"&gt;
  &lt;/div&gt;
  &lt;div class="frame"&gt;
    &lt;div class="page-copy"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt;
    .frame {
       position: fixed;
       bottom:20px;
       right: 20px;
    }
    .page-copy {
      position: absolute;
      top: 0; // this positioning doesn't work because parent has position: fixed
      right: 0;
      bottom: 0;
      left: 0;
    }
  &lt;/style&gt;
  </code></pre>