title: Overflow hidden property is not working with parallax scrolling
body: <p>The overflow hidden property is not working as expected when trying it with parallax scrolling. </p>
  
  <p>I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div</p>
  
  <p>Here is the HTML </p>
  
  <pre><code>&lt;div id="page2"&gt;
         &lt;p id="bb"&gt;The title&lt;/p&gt; //Some title
         &lt;div id="bg"&gt;&lt;/div&gt; //Blue box in front of the image(design decision)
         &lt;img src="img/Food.jpg" alt="prlx" id="prlx"/&gt; //The image which has the proprety
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JavaScript eventListener and the function :</p>
  
  <pre><code>window.addEventListener("scroll",func,false);
  
  function func(){
        prlx_lyr_1 = document.getElementById("prlx");
        prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
  }   
  </code></pre>
  
  <p>And this is my CSS for the image which i am trying to hide the overflowing parts :</p>
  
  <pre><code>#page2 img{
        position:relative;
        top:-300px;
  }
  </code></pre>
  
  <p>And this is the CSS of the div which contain the image </p>
  
  <pre><code>#page2{
        overflow:hidden;
        height:250px;
  }
  </code></pre>
  
  <p>There is some extra CSS for the #bg</p>
  
  <p><b>Update:</b>
     here is a <img src="https://i.stack.imgur.com/AG1hE.jpg" alt="screenshot to better explain "></p>
  
  <p>You can notice that the overflow is not hidden the container div is the blue side in the page </p>
  
  <p>Here is a <a href="http://jsfiddle.net/ubcq92gz/4/" rel="nofollow noreferrer">js fiddle</a></p>