`overflow: hidden` 是否改变了绝对孩子的定位？

Question

我有一个图片库，只能使用 css 将图片滑入滑出。 示例见http://codepen.io/anon/pen/xmhzE?editors=110 或附加代码。

只要#images-div 没有设置overflow: hidden，它就可以正常工作。当溢出设置为隐藏时，单个图像的绝对定位不再起作用。当我对图像的left-property 使用负值时，它也适用于溢出隐藏。

overflow:hidden 是否改变了绝对子级的布局方式？

有没有人能解决这个问题？

---

来源

index.html:

<div id="images">
  <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
  <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
  <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
  <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>

base.css：

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;
}

Answer 1

这个谜题让我坚持下去。我只是不能离开它。 所以昨晚我在摆弄它，但无法修复它（直到现在:)）。

测试用例 1

在简化事情的同时，我从图像元素中删除了不透明度，只留下了 1 个图像和一个链接。我最初将图像设置为 390px，以便我可以确保它在那个位置（你可以看到它的左边一点点）。

http://codepen.io/anon/pen/tpCrc

结论：

因此，需要注意的重要一点是，图像最初就在它应该在的位置。 然后，当单击按钮 1 时，您会看到它只是跳过了过渡。 所以浏览器不会改变元素的位置，因为溢出：隐藏（就像这篇文章的标题所暗示的那样）。它转到 CSS 中提到的位置（在 :target 部分），但没有过渡。

测试用例 2

然后我想知道为什么浏览器会那样做，我一直在想，也许图像元素的聚焦与它有关。 如果您考虑一下：单击其中一个按钮时，您会将#target 添加到页面和浏览器的 URL，然后尝试“滚动”到该元素。为此，该元素必须是可见的。

所以我想知道：也许 CSS 与它无关。我们试试吧： 所以我完全删除了 :target-part 和转换。

http://codepen.io/anon/pen/IvfBE

结论：

哇！我们在那里看到了什么？单击其中一个按钮时，图像仍会跳到左侧：0 !! 我认为我们在那里取得了领先。 不过，我不知道如何真正解决这个问题。对我来说仍然像是一个浏览器错误。

修复

然后 - 经过一夜好眠 - 我醒来时有了一个全新的想法。 如果我们没有真正定位我们想要转换的元素怎么办？

所以我为每个图像元素添加了一个容器，并将其作为目标。

<div id="images">
    <div id="img1container"><img id="image1" src="http://i.imgur.com/dL3io.jpg" /></div>
    <div id="img2container"><img id="image2" src="http://i.imgur.com/qASVX.jpg" /></div>
    <div id="img3container"><img id="image3" src="http://i.imgur.com/fLuHO.jpg" /></div>
    <div id="img4container"><img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /></div>
</div>
<div id="slider">
    <a href="#img1container">1</a>
    <a href="#img2container">2</a>
    <a href="#img3container">3</a>
    <a href="#img4container">4</a>
</div>

在 CSS 中，现在必须通过“[parentElement]:target img”来更改图像的位置。

body {
    text-align: center;
}
#images {
    width: 400px;
    height: 250px;
    overflow: hidden; /* this did break it in the past ;) */
    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 div:target img {
    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;
}

还有工作示例： http://codepen.io/anon/pen/lyzhi

结论：

耶！！事实上，通过不将重点放在要转换的元素上，它不会中断。 所以，你已经在那里解决了问题，但对我来说它仍然像是一个浏览器/引擎错误。 所以我建议你在某个地方创建一个错误报告（如果你有时间的话）。

顺便说一句：我已经在 Chrome 和 IE 中对此进行了测试——仅最新版本。您可能想在 Firefox 和其他一些浏览器中对此进行测试。