title: Is `overflow: hidden` changing the positioning of absolute children?
body: <p>I have an image gallery sliding images in an out only with css.
  See <a href="http://codepen.io/anon/pen/xmhzE?editors=110">http://codepen.io/anon/pen/xmhzE?editors=110</a> for the example or the attached code.</p>
  
  <p>It works fine as long as the <code>#images</code>-div does not have <code>overflow: hidden</code> set. When overflow is set to hidden, the absolute positioning of the single images does not work anymore. When I use negative values for the <code>left</code>-property of the images it also works with overflow hidden.</p>
  
  <p>Does <code>overflow:hidden</code> change the way how absolute children are layouted?</p>
  
  <p>Does anyone has a solution to this problem?</p>
  
  <hr>
  
  <p>Sources</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;div id="images"&gt;
    &lt;img id="image1" src="http://i.imgur.com/dL3io.jpg" /&gt;
    &lt;img id="image2" src="http://i.imgur.com/qASVX.jpg" /&gt;
    &lt;img id="image3" src="http://i.imgur.com/fLuHO.jpg" /&gt;
    &lt;img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /&gt;
  &lt;/div&gt;
  &lt;div id="slider"&gt;
    &lt;a href="#image1"&gt;1&lt;/a&gt;
    &lt;a href="#image2"&gt;2&lt;/a&gt;
    &lt;a href="#image3"&gt;3&lt;/a&gt;
    &lt;a href="#image4"&gt;4&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>base.css:</p>
  
  <pre><code>body {
      text-align: center;
    }
  #images {
    width: 400px;
    height: 250px;
    /*overflow: hidden; if this is set absolute positioning of images breaks*/
    position: relative;
    background-color: red;
  
    margin: 20px auto;
  }
  #images img {
    width: 400px;
    height: 250px;
    display: block;
  
    position: absolute;
    top: 0px;
    left: 400px;
    z-index: 1;
    opacity: 0;
  
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
  }
  #images img:target {
    top: 0px;
    left: 0px;
    z-index: 9;
    opacity: 1;
  }
  #slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
  }
  #slider a:hover {
    background: #C6E4F2;
  }
  </code></pre>