测试用例1

Question

我有一个图像库只用css滑出图像。有关示例或附带的代码，请参阅http://codepen.io/anon/pen/xmhzE?editors=110。

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

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中提到的位置（在：目标部分中），但没有过渡。

测试用例2

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

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

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中，图像的位置现在必须由＆＃34; [parentElement]改变：target img＆＃34;代替。

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

<强>结论：

耶!!实际上，通过不关注你想要转换的元素，它并没有突破。所以，你已经得到了你的修复，但对我来说它似乎仍然是一个浏览器/引擎错误。所以我建议你在某个地方创建一个bug报告（如果你有时间）。

BTW：我已经在Chrome和IE中对此进行了测试 - 仅限最新版本。您可能希望在Firefox和其他一些浏览器中测试它。

是`溢出：隐藏'改变绝对孩子的定位？

1 个答案:

测试用例1

测试用例2

修复