title: Chrome and Firefox overflow:hidden jumping elements
body: <p>I stumbled over a strange behaviour that occurs in Chrome and Firefox when you have got an element with "position:relative;" and "overflow:hidden;" and an anchor in it with "position:absolute;".</p>
  
  <p>Whenever the anchor gets focus the element above it magically jumps to the top, even though its styles and markup tell a different story.</p>
  
  <p>Example: <a href="http://codepen.io/mediadivisiongmbh/pen/pJWmxp" rel="nofollow">http://codepen.io/mediadivisiongmbh/pen/pJWmxp</a></p>
  
  <p>All you need is a setup similar to this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h1&gt;I can fly&lt;/h1&gt;
    &lt;a class="focus-me" href="#"&gt;Evil Link&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
      position:relative;
      overflow:hidden;
  
      /* Optional */
      border:1px solid gray;
  }
  
  .focus-me {
      position:absolute;
  }
  </code></pre>
  
  <p>Thanks for your answers so far. In order to clarify the issue please take a look at this example:</p>
  
  <p><a href="http://codepen.io/mediadivisiongmbh/pen/bdRjKy" rel="nofollow">http://codepen.io/mediadivisiongmbh/pen/bdRjKy</a></p>
  
  <p>When you hover over the container, the absolute positioned element containing the anchor will transition in view. When you click on it a lightbox (in this case Magnific Popup) is opened. After you close this lightbox the anchor gets focus again and jumps into view, which looks pretty odd.</p>
  
  <p>Setting the anchor to <code>display:none</code> by default and <code>display:block</code> when hovering over the container worked for solving this issue.</p>