title: Absolutely positioned element becoming invisible when it leaves container bounds
body: <p>see this <a href="http://jsfiddle.net/9r0mwutr/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="div1"&gt;
      &lt;div id="div2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="div3"&gt;&lt;/div&gt;
  &lt;p&gt;How can i make div2 appear on screen?&lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#div1
  {
  position:absolute;
      width:200px;
      height:200px;
      background-color: yellow;
      left:0px;
      top:0px;
      z-index:1;
  }
  
  #div2
  {
  position:absolute;    
      background-color:green;
      left:30px;
      top:30px;
      width:30px;
      height:30px;
      z-index:2;
  }
  
  #div3
  {
      position:absolute;
      left:200px;
      top:0px;
      width:200px;
      height:200px;
      background-color:red;
      z-index:1;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var left = 0;
  var div = document.getElementById("div2");
  window.setInterval(function()
                     {
                    div.style.left = left + "px";
                         left = (left + 5) % 370;
                     }, 30);
  </code></pre>
  
  <p><strong>Problem:</strong>
  div2 becomes invisible when it leaves its parent's bounds. how can i fix this without changing parent of div2. also i cannot change width and height of the divs in my application.</p>